React 开发部署二级目录的多种解决方案

472 阅读1分钟

React 开发模式下运行在二级目录下/build

  1. 我们采用Hash 模式,需要修改basename='/build'
  2. 打开浏览器访问的地址格式为:http://localhost:3000/#/build/login,login 为原路由

React 部署在二级目录下/build

方案一

直接修改package.json,增加homepage='.'

方案二

安装cross-env,并修改build 为cross-env PUBLIC_URL=. react-app-rewired build

方案三

  • 给hashRoute 增加basename='/build'
  • 修改config-overrides.js ,在config 处增加 setWebpackPublicPath('/build'),

以上只是以二级作为例子,其实可以实现多级部署。通过对以上三种方案的研究,对配置理解更加深入,总体上看方案一、方案二比较就好,不修改源码,建议采用。

参考资料

React 打包部署多级目录实践

create-react-app项目打包相关问题

React嵌入APP,需要的一些答案