Nginx部署多個Vue項目，配置二級域名

文章目錄

• 一、前言
• 二、配置Vue工程
• • 2.1 配置router
  • 2.2 配置vue.config
• 三、上傳dist檔案
• 四、配置nginx.cnf

一、前言

• 一個伺服器需要部署多個前端項目
  • 比如需要一個企業官網
  • 比如需要一個管理系統
• 這時候一個Nginx要怎麼配置多個前端項目呢
• 本文詳細講解：

  通過二級域名的方式來部署多個項目

  ，實作如下效果：
  • 通路www.xxx.com到企業官網
  • 通路www.xxx.com/admin到管理系統

二、配置Vue工程

• 一級域名的

  view

  不用改
• 二級域名的

  admin

  需要修改

2.1 配置router

src/router/index.js

• 增加一行

  base: 'admin',

export default new Router({
  base: 'admin',
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})
           

2.2 配置vue.config

vue.config.js

• 修改

  publicPath: "/admin/",

// vue.config.js 配置說明
//官方vue.config.js 參考文檔 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 這裡隻列一部分，具體配置參考文檔
module.exports = {
  // 部署生産環境和開發環境下的URL。
  // 預設情況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上
  // 例如 https://www.ruoyi.vip/。如果應用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑。例如，如果你的應用被部署在 https://www.ruoyi.vip/admin/，則設定 baseUrl 為 /admin/。
  publicPath: "/admin/", //process.env.NODE_ENV === "production" ? "/" : "/",
  // 在npm run build 或 yarn build 時 ，生成檔案的目錄名稱（要和baseUrl的生産環境路徑一緻）（預設dist）
  outputDir: 'dist',
  // 用于放置生成的靜态資源 (js、css、img、fonts) 的；（項目打包之後，靜态資源會放在這個檔案夾下）
  assetsDir: 'static', 
  // 是否開啟eslint儲存檢測，有效值：ture | false | 'error'
  lintOnSave: false,
           

三、上傳dist檔案

• dist是Vue生成的部署檔案，上傳到雲端

四、配置nginx.cnf

• 一級域名部署

  view_dist

• 二級域名部署

  admin_dist

• 一級域名路徑用

  root

  ，二級域名路徑用

  alias

vim /usr/local/nginx/conf/nginx.conf
cd /usr/local/nginx/sbin/
./nginx -s reload
           

server {
        listen       80;
        server_name  localhost;

        location / {
            root   /root/software/view_dist;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

        location /admin {
            alias   /root/software/admin_dist;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

        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:8080/;
        }
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
           

覺得好，就一鍵三連呗（點贊+收藏+關注）