nginx配置同一域名同一端口下部署多个vue项目
作者：strggle_bin
本文主要介绍了nginx配置同一域名同一端口下部署多个vue项目,可以根据根路径不同分别代理访问不同项目,具有一定的参考价值,感兴趣的可以了解一下
问题：
默认端口就只有一个，有多个项目需要部署到同一端口下。
解决方法：
根据根路径不同分别代理访问不同项目
第一步：
在vue.config.js文件中修改publicPath路径为/project/
......
module.exports = {
// 部署生产环境和开发环境下的URL。
// 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
publicPath: "/project/",
// 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
outputDir: 'dist',
// 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
assetsDir: 'static',
......
}
第二步：
在router文件夹中index.js文件中修改base为 ‘/project/’
... ...
const createRouter = () => new Router({
base: '/project/', // 调整这里，路径跟publicPath保持一致即可
mode: 'history', // 去掉url中的#
scrollBehavior: () => ({ y: 0 }),
routes: routers
})
打包
调整完毕后，直接执行build打包命令，可以发现index.html引入js路径增加了/project
... ... <script type="text/javascript" src="/project/static/js/chunk-vendors.js"></script> <script type="text/javascript" src="/project/static/js/app.js"></script> ... ...
调整nginx的server配置
server {
listen 9001;
server_name localhost;
# 这个是第一个vue项目 页面访问地址 http://ip:9001
location / {
# root F:/parant/dist;
root /home/project/dist/;
index index.html;
try_files $uri $uri/ /index.html;
}
# 这个是第二个vue项目 页面访问地址 http://ip:9001/project
location /project {
# alias F:/subparant/dist;
alias /home/other_project/dist/;
index index.html;
try_files $uri $uri/ /project/index.html; #解决刷新404
}
}
注意：如果页面中有二级路由的话，配置文件中一定不能用root，要用alias.
到此这篇关于nginx配置同一域名同一端口下部署多个vue项目的文章就介绍到这了,更多相关nginx部署多vue项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！