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
目录下了
成功部署的例子:
版权声明:
作者:东明兄
链接:https://blog.crazyming.com/note/2205/
来源:CrazyMing
文章版权归作者所有,未经允许请勿转载。
共有 0 条评论