例如现在有一个需求，要在同一台Nginx上部署两个基于若依的项目，分别是projectA和projectB,projectA 部署在 http://example.com 域名下，projectB部署在http://example.com/test 下。
1. projectA 部署
1.1 前端部署
打包编译
# 进入前端项目根路径 cd projectA/ruoyi-ui # 编译 npm run build:prod # 编译会生成 dist目录， 里面是编译的产物
Nginx 配置
location / {
# 配置访问根路径，将打包后的dist目录放在 home目录下
root /home/dist;
index index.html index.htm;
charset utf-8;
# 防止浏览器刷新
try_files $uri $uri/ /index.html;
}
1.2 后端部署
编译出jar包，上传至服务器
Nginx 配置后端服务
location /prod-api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# 假设 后端服务在本机的8080端口
proxy_pass http://localhost:8080/;
}
2. projectB部署
2.1 前端部署
项目修改：
1> 找到vue.config.js 配置前缀test
publicPath: process.env.NODE_ENV === "production" ? "/test/" : "/",
2> 找到 src/router/index.js 配置
export default new Router({
mode: 'history', // 去掉url中的#
// 配置 test
base:'test',
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
// 静态资源配置根路径
export function getBaseUrl() {
let baseUrl = ''
if (process.env.NODE_ENV === 'development') {
// 开发模式
baseUrl = '/'
} else {
// 生产环境
baseUrl = '/test/'
}
return baseUrl
}
3> nginx 配置
location /test/ {
# 前端根路径，记得最后加 /
alias /home/test/dist/;
index index.html index.htm;
try_files $uri $uri/ /test/index.html;
}
2.2 后端部署和前面一样只是换了端口(如果服务location变了记得前端也要修改)
例如：
location /prod-api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://localhost:8082/;
}
通过以上配置就可以 通过http://example.com 访问projectA 通过http://example.com/test访问projectB
到此这篇关于Nginx部署多个vue项目的方法步骤的文章就介绍到这了,更多相关Nginx部署多个vue项目内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
