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

Daming 2020-03-06
0条评论 743 次浏览
Daming 2020-03-060条评论 743 次浏览

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

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

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

react cli 的webpack等配置文件默认是在node_modules中,输入命令:yarn eject 既可将webpack配置文件暴露出来,运行完毕后 项目中会多出 configscript 目录,这样就将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/

4+

发表评论

电子邮件地址不会被公开。