主要是通过子路径的方式,将项目打包好之后不是直接放置到服务器web的根目录下,而是在根目录下创建不同的文件夹来存放不同的项目。
比如现在web根目录的目录地址是 /usr/share/nginx/html
将 A 项目放置在 /usr/share/nginx/html/a 目录中,访问此项目的url地址为 http://xxx/a
将 B 项目放置在 /usr/share/nginx/html/b 目录中,访问此项目的url地址为 http://xxx/b
这时访问时,可能会出现一些资源访问404的问题。
原因是默认情况下,不管是 Vue CLI 还是 Create React App 亦或是 Create Umi 创建的项目,都假设你的应用是被部署在一个域名的根路径上的。
解决方法:
- Vue CLI 创建的项目,在 vue.config.js 中设置 publicPath 属性为 “./“。然后重新打包上线部署
- Create React App 创建的项目,在 package.json 中设置 homepage 属性为 “./“。然后重新打包上线部署
- Create Umi 创建的项目,在 .umirc.js 中设置 publicPath 属性为 “./“。然后重新打包上线部署