Nginx部署多個vue項目的方法步驟

更新時間：2023年06月14日 11:56:01 作者：傻瓜搬磚人

本文主要介紹了Nginx部署多個vue項目的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

1. projectA 部署

1.1 前端部署

打包編譯

# 進入前端項目根路徑
cd projectA/ruoyi-ui
# 編譯
npm run build:prod
# 編譯會生成 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包，上傳至服務器

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
})
// 靜態(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 后端部署和前面一樣只是換了端口(如果服務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項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: