React应用构建后CSS、JS等静态资源引用链接错误该如何解决？

问题诱因 #

这是典型的React生产构建资源路径前缀配置错误问题：

• 项目构建工具配置了错误的资源根路径，自动给所有静态资源引用添加了多余的/simple-portfolio路径前缀
• 实际部署站点的根路径是https://simple-portfolio.pages.dev/，没有对应/simple-portfolio子路径，请求静态资源时服务器返回了404页面的HTML内容，因此出现MIME类型不匹配、JS解析碰到<字符报错的问题。

修复方案 #

根据你使用的构建工具选择对应方案即可：

如果你使用Create React App搭建项目 #

任选一种操作即可：

1. 打开项目根目录的package.json文件，删除homepage字段，或者将该字段值修改为"homepage": "."，也可以直接填写线上站点地址"homepage": "https://simple-portfolio.pages.dev/"
2. 构建时临时指定根路径，执行命令：

   # Linux/Mac环境
   PUBLIC_URL= npm run build
   # Windows环境
   set PUBLIC_URL=&&npm run build
   

如果你使用Vite搭建项目 #

打开项目根目录的vite.config.js，修改配置项：

export default defineConfig({
  base: './' // 也可设置为 '/' 或者线上站点地址
})

如果你使用自定义Webpack配置 #

修改webpack配置中的output.publicPath配置项：

module.exports = {
  output: {
    publicPath: './' // 也可设置为 'auto'、'/'
  }
}

修改配置后重新执行构建、部署上线即可解决问题。

内容的提问来源于stack exchange，提问作者Devang Saklani