react PrerenderSPAPlugin 预渲染页面的静态文件访问路径问题

问题

当使用 PrerenderSPAPlugin 预渲染页面的时候,如果只渲染首页没有问题,当渲染其他的页面的时候,如about,存在访问css js 等静态文件失败的问题

new PrerenderSPAPlugin({
            routes: [
              '/',
              '/about',
            ],
            staticDir: path.join(__dirname, 'build'),
  )}
 

生成的build/about/index.html 文件中的静态文件为./main.js ,而真实的路径为 build/main.js,导致路径访问错误.

解决办法

修改访问路径为绝对定位, webpack publicPath = '/'

下边是craco的配置文件的修改内容

webpack: {
  configure: (webpackConfig: any) => {
      webpackConfig.output.publicPath = '/'
      return webpackConfig
  },
}