目錄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項目內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！