部署 ReactJS 应用程序后，是否有修复加载失败的解决方案 <script> with source [domain name]

Question

我在部署 ReactJS 应用程序后遇到了这个问题。它在我的本地主机上运行良好。案例：

该问题只影响动态页面的路由。
第一次尝试渲染，显示ChunkFailedErr。我发现 React.lazy 可能会导致这个问题，所以我更改了不使用 React.lazy 的组件再也没有了。
进入域后，它运行良好，直到我刷新第

这是刷新页面后的错误图片。 this is the screenshot of console error

请帮助我。

App.js

import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Login from './views/pages/login/Login'
import Register from './views/pages/register/Register'
import NotFound from './views/pages/page404/Page404'
import InternalError from './views/pages/page500/Page500'
import DefaultLayout from './layout/DefaultLayout'
import './scss/style.scss'

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/login" name="Login Page" render={(props) => <Login {...props} />} />
          <Route
            exact
            path="/register"
            name="Register Page"
            render={(props) => <Register {...props} />}
          />
          <Route exact path="/404" name="Page 404" render={(props) => <NotFound {...props} />} />
          <Route
            exact
            path="/500"
            name="Page 500"
            render={(props) => <InternalError {...props} />}
          />
          <Route path="/" name="Home" render={(props) => <DefaultLayout {...props} />} />
        </Switch>
      </BrowserRouter>
    )
  }
}

export default App

DefaultLayout.js

import { AppContent, AppSidebar, AppHeader } from '../components/index'

const DefaultLayout = () => {
  return (
    <div>
      <AppSidebar />
      <div className="wrapper d-flex flex-column min-vh-100 bg-light">
        <AppHeader />
        <div className="body flex-grow-1 px-3">
          <AppContent />
        </div>
      </div>
    </div>
  )
}

export default DefaultLayout

AppContent.js

import { Redirect, Route, Switch } from 'react-router-dom'
import { CContainer } from '@coreui/react'

// routes config
import routes from '../routes'

const AppContent = () => {
  return (
    <CContainer lg>
      <Switch>
        {routes.map((route, idx) => {
          return (
            route.component && (
              <Route
                key={idx}
                path={route.path}
                exact={route.exact}
                name={route.name}
                render={(props) => (
                  <>
                    <route.component {...props} />
                  </>
                )}
              />
            )
          )
        })}
        <Redirect from="/" to="/orders/list-order" />
      </Switch>
    </CContainer>
  )
}

export default React.memo(AppContent)

routes.js

import StatusOrder from './views/order-management/status-order/StatusOrder'
import HistoryOrder from './views/order-management/history-order/HistoryOrder'
import MonthlyRecap from './views/financing/MonthlyRecap'
import RatingOverview from './views/rating-feedback/RatingOverview'

const routes = [
  { path: '/', exact: true, name: 'Home' },

  { path: '/orders/list-order', name: 'List Order', component: ListOrder },
  { path: '/orders/status-order', name: 'Status Order', component: StatusOrder },
  { path: '/orders/history-order', name: 'History Order', component: HistoryOrder },

  { path: '/financing/monthly-recap', name: 'Monthly Report', component: MonthlyRecap },

  { path: '/feedback/rating-overview', name: 'Rating Overview', component: RatingOverview },
]

export default routes

package.json

{
  "name": "@coreui/coreui-free-react-admin-template",
  "version": "4.1.1",
  "description": "CoreUI Free React Admin Template",
  "homepage": ".",
  "bugs": {
    "url": "https://github.com/coreui/coreui-free-react-admin-template/issues"
  },
  "repository": {
    "type": "git",
    "url": "git@github.com:coreui/coreui-free-react-admin-template.git"
  },
  "license": "MIT",
  "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
  "scripts": {
    "build": "react-scripts build",
    "build:n17": "react-scripts --openssl-legacy-provider build",
    "changelog": "auto-changelog --starting-version 4.1.0 --commit-limit false --hide-credit",
    "eject": "react-scripts eject",
    "lint": "eslint \"src/**/*.js\"",
    "start": "react-scripts start",
    "start:n17": "react-scripts --openssl-legacy-provider start",
    "test": "react-scripts test",
    "test:cov": "npm test -- --coverage --watchAll=false",
    "test:debug": "react-scripts --inspect-brk test --runInBand"
  },
  "config": {
    "coreui_library_short_version": "4.1"
  },
  "dependencies": {
    "@coreui/chartjs": "^3.0.0",
    "@coreui/coreui": "^4.1.0",
    "@coreui/icons": "^2.1.0",
    "@coreui/icons-react": "^2.0.0",
    "@coreui/react": "^4.1.0",
    "@coreui/react-chartjs": "^2.0.0",
    "@coreui/utils": "^1.3.1",
    "@reduxjs/toolkit": "^1.8.1",
    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.5",
    "chart.js": "^3.6.0",
    "classnames": "^2.3.1",
    "core-js": "^3.19.1",
    "enzyme": "^3.11.0",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-app-polyfill": "^2.0.0",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.8",
    "react-router-dom": "^5.3.2",
    "redux": "^4.1.2",
    "redux-thunk": "^2.4.1",
    "simplebar-react": "^2.3.6"
  },
  "devDependencies": {
    "auto-changelog": "~2.3.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "prettier": "2.5.0",
    "react-scripts": "^4.0.3",
    "sass": "^1.43.5"
  },
  "engines": {
    "node": ">=10",
    "npm": ">=6"
  }
}

Answer 1

尝试在 package.js

上更换

这个"homepage": ".", "homepage": "YOUR DOMAIN",

然后npm run build

说说进展如何

部署 ReactJS 应用程序后，是否有修复加载失败的解决方案 <script> with source [domain name]

Is there solution to fix Loading failed for the <script> with source [domain name] after deployment ReactJS App

javascript

reactjs