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

【问题标题】：Components not being rendered in webpack production build在 webpack 生产构建中未呈现组件
【发布时间】：2020-12-21 04:46:18
【问题描述】：

所以问题是 webpack-dev-server 一切正常。

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

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

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

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

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

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

【问题讨论】：

我看到您的代码框内一切正常。你有什么问题？
@tmhao2005 问题是从构建文件夹打开本地文件不起作用。请再读一遍问题！
我的意思是我尝试了模式生产伙伴，但没有发生任何奇怪的事情
@tmhao2005 哦，我明白了，它似乎也可以在具有生产模式的 dev-server 上工作。但不适用于 build 文件夹中的文件。我不明白这个！
我也尝试在本地构建然后提供构建的文件但没有运气:)

标签： reactjs webpack webpack-4 webpack-production

【解决方案1】：

尝试使用 serve https://www.npmjs.com/package/serve 之类的包为您的构建文件夹提供服务

创建一个类似如下内容的serve.json，用于直接访问子路由。

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

【讨论】：