Nginx部署多个vue项目的方法步骤

目录1. projectA 部署1.1 前端部署1.2 后端部署2. projectB部署2.1 前端部署2.2 后端部署和前面一样只是换了端口(如果服务location变了记得前端也要修改)

例如现在有一个需求，要在同一台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项目内容请搜索好吧啦网以前的文章或继续浏览下面的相关文章希望大家以后多多支持好吧啦网！