目錄1. projectA 部署1.1 前端部署1.2 后端部署2. projectB部署2.1 前端部署2.2 后端部署和前面一樣只是換了端口(如果服務(wù)location變了記得前端也要修改)

例如現(xiàn)在有一個(gè)需求，要在同一臺(tái)Nginx上部署兩個(gè)基于若依的項(xiàng)目，分別是projectA和projectB,projectA 部署在 http://example.com 域名下，projectB部署在http://example.com/test 下。

1. projectA 部署1.1 前端部署

打包編譯

# 進(jìn)入前端項(xiàng)目根路徑cd projectA/ruoyi-ui# 編譯npm run build:prod# 編譯會(huì)生成 dist目錄， 里面是編譯的產(chǎn)物

Nginx 配置

location / {# 配置訪問根路徑，將打包后的dist目錄放在 home目錄下root /home/dist;index index.html index.htm;charset utf-8;# 防止瀏覽器刷新try_files $uri $uri/ /index.html;}1.2 后端部署

編譯出jar包，上傳至服務(wù)器

Nginx 配置后端服務(wù)

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; # 假設(shè) 后端服務(wù)在本機(jī)的8080端口 proxy_pass http://localhost:8080/; }2. projectB部署2.1 前端部署

項(xiàng)目修改：

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})// 靜態(tài)資源配置根路徑export function getBaseUrl() { let baseUrl = '' if (process.env.NODE_ENV === 'development') { // 開發(fā)模式 baseUrl = '/' } else { // 生產(chǎn)環(huán)境 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 后端部署和前面一樣只是換了端口(如果服務(wù)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

到此這篇關(guān)于Nginx部署多個(gè)vue項(xiàng)目的方法步驟的文章就介紹到這了,更多相關(guān)Nginx部署多個(gè)vue項(xiàng)目?jī)?nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！