實(shí)現(xiàn)同個(gè)域名下部署多個(gè)項(xiàng)目剿吻，通過(guò)不同url來(lái)區(qū)分調(diào)用對(duì)應(yīng)項(xiàng)目：
如：
http://xxxx:8090/app1 展示項(xiàng)目1
http://xxxx:8090/app2 展示項(xiàng)目2


相關(guān)文檔請(qǐng)查閱：HTML5 History 模式

1. 修改router基礎(chǔ)路徑：

base衡蚂，應(yīng)用的基路徑。例如，如果整個(gè)單頁(yè)應(yīng)用服務(wù)在 /app/ 下滞造，然后 base 就應(yīng)該設(shè)為 "/app/"

引自：Vue Router base

根據(jù)： http://xxxx:8090/app1
我的項(xiàng)目需要部署到/app1/下河胎，所以配置為 base:‘a(chǎn)pp1’

2. 修改靜態(tài)文件輸入路徑：

publicPath，部署應(yīng)用包時(shí)的基本 URL幔嗦。
默認(rèn)情況下酿愧，Vue CLI 會(huì)假設(shè)你的應(yīng)用是被部署在一個(gè)域名的根路徑上，例如 https://www.my-app.com/邀泉。如果應(yīng)用被部署在一個(gè)子路徑上嬉挡，你就需要用這個(gè)選項(xiàng)指定這個(gè)子路徑钝鸽。例如，如果你的應(yīng)用被部署在 https://www.my-app.com/my-app/庞钢，則設(shè)置 publicPath 為 /my-app/拔恰。

引自：Vue Cli publicPath

根據(jù)： http://xxxx:8090/app1
vue.config.js文件：
publicPath: 'app1' ，值為應(yīng)用的基路徑
publicPath: '' 基括，或者值為空字符串

注意點(diǎn)：

• 從 Vue CLI 3.3 起 baseUrl 已棄用颜懊，改為用publicPath。
• publicPath: './' publicPath 可以設(shè)置成相對(duì)路徑风皿，但是并不推薦河爹。
  這樣所有的資源都會(huì)被鏈接為相對(duì)路徑，在HTML5 history.pushState（即history模式）的路由時(shí)或使用 pages 選項(xiàng)構(gòu)建多頁(yè)面應(yīng)用時(shí)會(huì)有限制桐款。

3. nginx配置：

上傳到nginx并配置nginx不同項(xiàng)目的路徑：

3.1：我的nginx的文件根目錄html文件夾如下：

3.2：我的server配置：

try_files 也可以用 rewrite方法來(lái)實(shí)現(xiàn)：

location /app1/ {
  if (!-e $request_filename) {
     rewrite ^/(.*) /app1/index.html last;
     break;
  }
}

如果$request_filename (/html/app1/sub_page)不存在咸这， 則會(huì)直接重定向至index.html ,在index.html 中讓vue的router自己去處理。

3.3 修改配置后魔眨，一定一定重啟服務(wù)炊苫，配置才會(huì)生效。

nginx -s reload

相關(guān)的幾個(gè)問(wèn)題：

# 為什么刷新會(huì)404冰沙？#

在配置vue 路由的nginx時(shí)侨艾，首先要確認(rèn)你的vue路由采用的是hash 模式還是hestory模式，

如果是history模式拓挥，

location /app1/{
    root html;
    index index.html index.html;
}

項(xiàng)目按照正常的邏輯去點(diǎn)擊唠梨，不會(huì)出現(xiàn)問(wèn)題，但是一旦刷新侥啤，就會(huì)出現(xiàn)404当叭，

1.nginx 目錄 /html/app1/ 下面有發(fā)布的vue靜態(tài)資源，有index.html 和一些js css盖灸。

2.訪問(wèn) http://xxxx:8090/app1/index.html

3.nginx 匹配會(huì)在/html下面去找app1/index.html 這個(gè)是可以找到的蚁鳖。

4.但是當(dāng)點(diǎn)擊其他的頁(yè)面，vue路由跳轉(zhuǎn)到了/subpage赁炎；鏈接變成了 http://sss.sss.com/app1/subpage

這時(shí)nginx還會(huì)在/html 下面去找app1/subpage醉箕，很可惜，沒(méi)找到徙垫。

這是因?yàn)関ue的路由不是真實(shí)的路由讥裤，而nginx是按照真實(shí)的文件目錄路徑去請(qǐng)求的，這時(shí)姻报，nginx 肯定找不到vue的非index的路由己英，404。

# try_files 配置與重定向#

[ try_files ]
語(yǔ)法：
????格式1：try_files file ... uri;
????格式2：try_files file ... =code;
默認(rèn)值：-
配置段：server吴旋、location

try_file路徑匹配损肛。Nginx會(huì)按順序檢查文件及目錄是否存在（根據(jù) root 和 alias 指令設(shè)置的參數(shù)構(gòu)造完整的文件路徑）厢破，并用找到的第一個(gè)文件提供服務(wù)。在元素名后面添加斜杠 / 表示這個(gè)是目錄治拿。如果文件和目錄都不存在摩泪，Nginx會(huì)執(zhí)行內(nèi)部重定向，跳轉(zhuǎn)到命令的最后一個(gè) uri 參數(shù)定義的 URI 中忍啤。

可以分為幾個(gè)點(diǎn)來(lái)理解：

• 按指定的file順序查找存在的文件，并返回第一個(gè)找到的文件或文件夾仙辟；
• 查找路徑是按照給定的root或alias為根路徑來(lái)查找的同波；
• 如果給出的file都沒(méi)有匹配到，則重新請(qǐng)求最后一個(gè)參數(shù)給定的uri叠国，就是新的location匹配未檩；
• 只有最后一個(gè)參數(shù)可以引起一個(gè)內(nèi)部重定向，是請(qǐng)求粟焊，之前的參數(shù)只設(shè)置內(nèi)部URI的指向冤狡；
• 最后一個(gè)參數(shù)是回退URI且必須存在，否則會(huì)出現(xiàn)內(nèi)部500錯(cuò)誤;
• 格式2项棠，如果最后一個(gè)參數(shù)是 = 404 悲雳，若給出的file都沒(méi)有匹配到，則最后返回404的響應(yīng)碼香追。

格式1示例：

server {
    listen 80;
    server_name linux.web.com;

    location / {
        root /code;
        try_files $uri $uri/ /index.html;
    }
}

當(dāng)請(qǐng)求 linux.web.com/2.html 時(shí)合瓢，會(huì)依次匹配

1. /code/2.html文件
2. /code/2.html/文件夾下的 index.html 文件，即查找 /code/2.html/index.html(結(jié)尾加斜線表示為文件夾)
3. 請(qǐng)求linux.web.com/code/index.html 透典。重定向到應(yīng)用的初始頁(yè)面 index.html晴楔，那么路徑的匹配就交回給了前端，讓前端router自己去匹配并跳轉(zhuǎn)峭咒。

這也是為什么vue + nginx 在非主業(yè)刷新404問(wèn)題的原因税弃。

格式2示例：

server {
    listen 80;
    server_name linux.web.com;

    location / {
        root /code;
        try_files $uri =404;
    }
}

當(dāng)訪問(wèn)linux.web.com/2.html(文件存在)時(shí)，返回/code/2.html內(nèi)容
當(dāng)訪問(wèn)linux.web.com/2.html(文件不存在)時(shí)凑队，返回404狀態(tài)
也可以使用一個(gè)文件作為最后一個(gè)參數(shù)则果，如果最后一個(gè)參數(shù)是文件，那么這個(gè)文件必須存在漩氨。

# nginx配置root短条、alias 的區(qū)別#

nginx指定文件路徑有兩種方式root和alias。主要區(qū)別在于如何解釋location后面的uri才菠，這會(huì)使兩者分別以不同的方式將請(qǐng)求映射到服務(wù)器文件上茸时。

區(qū)別：

• 映射路徑的方式不同；
• alias 只能作用在location中赋访，而root可以存在server可都、http缓待、location中；
• alias 后面必須要用 “/” 結(jié)束渠牲，否則會(huì)找不到文件旋炒，而 root 則對(duì) ”/” 可有可無(wú)。

[ root ]
語(yǔ)法：root path
默認(rèn)值：root html
配置段：http签杈、server瘫镇、location、if in location
例如：

location /img/ {
    root /data/w3;
}

root會(huì)根據(jù)完整的URI請(qǐng)求來(lái)映射答姥。即資源真實(shí)的路徑是root指定的值加上location指定的值铣除。
當(dāng)請(qǐng)求 http://xxx.com/img/top.gif 時(shí)，那么在服務(wù)器里面對(duì)應(yīng)的真正的資源是: /data/w3/img/top.gif鹦付。

[ alias ]
語(yǔ)法：alias path
默認(rèn)值：-
配置段：location
例如：

location /img/ {
    alias /data/w3/images/;
}

alias尚粘，別名，指代的是location敲长。即不管location的值怎么寫郎嫁，資源的真實(shí)路徑都是 alias 指定的路徑。
當(dāng)請(qǐng)求 http://xxx.com/img/top.gif 時(shí)祈噪，在服務(wù)器查找的資源路徑是: /data/w3/images/top.gif

# 案例#

有項(xiàng)目 用戶端(smuser) 和 管理系統(tǒng)端(sm_admin);

期望訪問(wèn)形式為：
用戶端：http://xxx.com/smuser
管理系統(tǒng)端：http://xxx.com/sm_admin

項(xiàng)目位置為：
用戶端： /usr/local/project/sm_client泽铛；
管理系統(tǒng)端：/usr/local/project/sm_admin；

nginx.conf 設(shè)置如下：

server {
    listen 80;
    server_name linux.web.com;

   location / {
      root  html;
      index index.html index.htm;
    }

   location /smuser {
      alias /usr/local/project/sm/sm_client/;
      index index.html;
      try_files $uri $uri/ /smuser/index.html; # or try_files $uri $uri/ /smuser=404;
   }

   location /sm_admin {
      root /usr/local/project/sm;
      try_files $uri $uri/ /sm_admin/index.html;
   }
}

vue項(xiàng)目配置辑鲤，以 sm_admin 項(xiàng)目為例：
主要修改的又：(1) 修改router基礎(chǔ)路徑：base: 'sm_admin'(2) 修改靜態(tài)文件輸入路徑：publicPath: ''厚宰。
因?yàn)轫?xiàng)目打包，接口域名可能不一樣遂填，所以在開發(fā)和生產(chǎn)上做了不同的配置铲觉，如下：

1）在根目錄下新鍵以 .env開頭的文件： .env.dev 和 .env.prod：

用法：

• .env.dev 和 .env.prod 文件需在項(xiàng)目根目錄下；
• 自定義屬性以 VUE_APP 開頭吓坚，屬性值默認(rèn)為字符串形式撵幽，不用自己再加引號(hào)。例如
  設(shè)置：VUE_APP_TITLE：zhou
  獲冉富鳌：console.log(process.env.VUE_APP_TITLE) // "zhou"
• 在 package.json 文件設(shè)置以 env.dev / .env.prod 啟動(dòng)/打包 文件
• 修改配置之后需要重啟才生效

 "scripts": {
    "serve": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build --mode prod",
    "lint": "vue-cli-service lint"
  },

2）修改靜態(tài)文件輸入路徑
vue.config.js:

module.exports = {
  publicPath: '',
  devServer: {
    proxy: {
      '/api': {
        target: process.env.VUE_APP_BASE_API, // API服務(wù)器的地址
        ws: true, // 代理websockets
        changeOrigin: true, // 虛擬的站點(diǎn)需要更管origin
        pathRewrite: { // 重寫路徑 比如'/api/aaa/ccc'重寫為'/aaa/ccc'
          '^/api': '/api'
        }
      }
    },
    disableHostCheck: true,
  }
}

3）修改router基礎(chǔ)路徑
router：

const router = new VueRouter({
  mode: 'history',
  base: process.env.VUE_APP_BASE_ROUTER,
  routes
})

4）設(shè)置api域名
api：

const http = axios.create({
  baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '',
  timeout: 120000
})

如果在開發(fā)環(huán)境配置了代理 devServer.proxy盐杂，那么此時(shí) baseURL需設(shè)置為空或默認(rèn)不設(shè)置。

相關(guān)：
使用nginx部署多個(gè)前端項(xiàng)目-網(wǎng)頁(yè)url太長(zhǎng)怎么換
nginx配置vue項(xiàng)目哆窿，帶項(xiàng)目名