ReactJS执行npm run build打包时如何指定静态资源根目录适配子路径部署？

使用CRA脚手架搭建的React项目，无需执行eject暴露底层配置，即可自定义构建资源的前缀路径：

• 打开项目根目录下的package.json文件
• 在顶层配置字段中新增条目："homepage": "/app/"
• 重新执行npm run build，生成的index.html中所有静态资源路径，会自动从默认的/static/xxx格式调整为/app/static/xxx格式，完全匹配部署在https://dominio.com/app路径下的访问要求，不需要手动修改任何构建产物。

注意：配置值末尾的斜杠不能遗漏，否则会出现路径拼接错误（例如生成/appstatic/css/main.xxx.css这类无效路径）。如果项目接入了React Router实现前端路由，需要同步在路由初始化时设置basename="/app"，避免路由跳转、页面刷新时出现路径错位。

对于未使用CRA脚手架、自行搭建Webpack构建链路的项目，直接修改构建输出的公共路径配置即可：

• 打开项目根目录的webpack.config.js文件
• 定位到output配置块，将publicPath字段的值修改为"/app/"

配置示例：

module.exports = {
  // 原有其他配置保持不变
  output: {
    // 原有其他输出配置保持不变
    publicPath: "/app/"
  }
}

修改完成后重新执行构建，所有JS、CSS、静态图片等资源的引用路径都会自动带上/app前缀，从根本上解决默认路径指向域名根目录导致的访问错误。

避坑提示：不要图省事将publicPath设置为相对路径"./"，当项目存在二级路由时，页面刷新会顺着当前路由层级拼接资源路径，依然会出现资源404的问题。

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