React部署服务器子目录的方法

一般我们将项目打包后都是放在根目录,今天写demo的时候想将打包好的react前端项目放在子目录下访问，例如：www.xxx.com/item

网上搜索，大家的答案都是在路由加basename属性
例如:<HashRouter basename={'/child'}> ...
但经过各种尝试，发现basename属性无效。

想到以前也尝试过在子目录下访问vue项目，是修改 webpack配置文件中的 assetsPublicPath，参考笔记：vue部署服务器子目录的问题

react cli 的webpack等配置文件默认是在node_modules中，输入命令：yarn eject 既可将webpack配置文件暴露出来，运行完毕后 项目中会多出 config 和 script 目录，这样就将webpack配置文件暴露出来了。

在 config/webpack.config.js 中发现这样一段代码：

const publicUrlOrPath = getPublicUrlOrPath(
  process.env.NODE_ENV === 'development',
  require(resolveApp('package.json')).homepage,
  process.env.PUBLIC_URL
);

可以看到发布路径获取的是package.json的homepage，
在package.json中添加homepage：

  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "/react-router-dom-demo",

现在在用 yarn build 进行打包

这样就可以将打包后的react项目部署在 react-router-dom-demo 目录下了

成功部署的例子：

在线Demo：http://demo.crazyming.com/react-router-dom-demo/