因为没有域名，所以用路径来作区分，
- 主项目：直接根路由访问该项目，与正常配置无任何差别
- 从项目：此处设置/new路径，为从项目，所有从项目访问路径均要加上/new
Nginx 配置文件如上所示
server { listen 80; server_name localhost; location / { root html/; index index.html index.htm; try_files $uri $uri/ /index.html; } location /new { alias html/new/; index index.html index.htm; try_files $uri $uri/ /new/index.html; } }主要就是在项目中增加一个baseUrl，就是你自定义的路径，我这里是new
- vue.config.js
增加 publicPath: '/new/'
module.exports = { lintOnSave: false, // 关闭eslint publicPath: '/new/', devServer: { port: 80, // 端口号的配置 open: true, // 自动打开浏览器 proxy: { '/api': { target: 'http://127.0.0.1:8080/', changeOrigin: true, pathRewrite: { '^/api': '/' } }, }, } }- index.html
增加 <meta base=/new/>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta base=/new/> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> </head>- router/index.js
增加 base: '/new/'
const router = new VueRouter({ base: '/new/', routes: globalRoutes })================================
还有一点！！！！！！！
在从项目中，上述地方均改了以后，对于静态文件，使用url请求的，也要手动增加/new路径，要不然打开项目以后会 找不到资源。
例如我这里请求前端的地图资源数据，我是用前端地址＋位置访问的，如果此处不改，上线后就会找不到静态资源
其实还有个办法，就是上线以后，哪个资源找不到，就回去改哪个，毕竟项目大可能也改不全，比如上线了，网站背景图没刷出来，F12查看，找不到，对一下路径发现错了，回去改即可
if (!this.mapData[arg.name]) { const ret = await axios.get('http://99.199.199.99:80' + '/new/static/map/country/' + arg.name + '.json') this.mapData[arg.name] = ret.data this.$echarts.registerMap(arg.name, ret.data) }改了配置文件，和前端代码，docker重启Nginx，就能正常访问了，记得两个前端项目都用同一个接口哈
原文链接：https://blog.csdn.net/m0_51360693/article/details/130771429
© 版权声明
声明📢本站内容均来自互联网，归原创作者所有，如有侵权必删除。
本站文章皆由CC-4.0协议发布，如无来源则为原创，转载请注明出处。
THE END
