未在Webpack生产版本中呈现的组件

Question

所以问题在于， webpack-dev-server 一切正常。

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

未渲染的 组件是Route。好吧，我是第一次使用Route，经过大量搜索 之后，我才明白我应该使用historyApiFallback和publicPath在 webpack.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

Answer 1

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

之类的软件包来服务构建文件夹

创建具有以下类似内容的serve.json，以直接访问子路由。

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