React项目构建后文件链接错误，该如何修复？

方案1：修改package.json配置 #

在项目根目录的package.json中添加"homepage"字段并设置为.，构建工具会自动生成相对路径的资源链接：

{
  "name": "your-project-name",
  "homepage": ".",
  // 其余配置项...
}

添加后重新执行npm run build，生成的index.html里的资源路径会变为./static/css/main.073c9b0a.css这类格式，浏览器就能正确定位文件。

方案2：通过环境变量临时配置 #

如果不想修改package.json，可以在构建时通过PUBLIC_URL环境变量指定相对路径：

PUBLIC_URL=. npm run build

该命令会临时覆盖路径配置，同样能生成正确的相对路径资源链接。

方案3：自定义Webpack配置（适用于eject或自定义脚手架项目） #

如果已经执行npm run eject暴露了Webpack配置，或是使用自定义Webpack的项目，直接修改webpack.config.js中的publicPath：

module.exports = {
  // 其他配置...
  output: {
    // 其他output配置...
    publicPath: './'
  }
}

保存后重新构建即可生效。

补充：如果项目部署在服务器子目录（比如https://example.com/my-app/），则homepage或PUBLIC_URL需设置为/my-app/，而非.，适配子目录路径结构。

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