组件未在 webpack 生产构建中呈现

Question

所以问题是 webpack-dev-server.

一切都按预期工作

但是当我在 npm run build 之后手动打开 index.html 时，我只看到 header 正在渲染的组件，其余为取数据后渲染的组件为空。控制台没有错误。

未渲染的 组件是 Route。好吧，我是第一次使用 Routes，在搜索了很多之后，我了解到我应该使用 historyApiFallback 和 publicPath 在 webpack.config.js.

output: {
        path: path.join(__dirname, '/build'),
        filename: '[name].bundle.js',
        publicPath: '/'
    },
devServer: {
    historyApiFallback: true
  },

但是结果是一样的。我不知道它在开发和生产方面有何不同。我还想稍微解释一下您可能提供的修复方法！

请告诉我原因和解决办法！

Link 到项目- https://codesandbox.io/s/fetch-countries-api-1ibwp?file=/src/index.js:138-154

Answer 1

尝试使用类似 serve https://www.npmjs.com/package/serve

的包为您的构建文件夹提供服务

创建一个类似以下内容的serve.json，用于直接访问sub-routes。

{
  "public": "build",
  "rewrites": [
    {
      "source": "/*",
      "destination": "/index.html"
    }
  ]
}

组件未在 webpack 生产构建中呈现

Components not being rendered in webpack production build

reactjs

webpack

webpack-4

webpack-production