同一個域名下部署多個前端項目，修改vue-cli 環境變量BASE_URL

公司讓用vue重構一個angular項目，需要可以在新舊版本間切換，慢慢過渡到只用新版本。

查詢Nginx配置，得知

想要在同一個域名下部署多個前端項目，通過不同url來區分調用相應前端項目。
比如：部署項目a，項目b。想要效果如下。
瀏覽器輸入：http://localhost:8082/a/，展示項目a。
瀏覽器輸入：http://localhost:8082/b/，展示項目b。

這樣兩版共用一個域名，那么這個域名下的cookie等登陸信息就可以共用了，切換版本不用重新登錄。

具體配置

location /a/ {
     alias html/app/;
     index  index.html index.htm;
     try_files $uri $uri/ /app/index.html;
}
location /b/ {
     alias html/pc/;
     index  index.html index.htm;
     try_files $uri $uri/ /pc/index.html;
}

vue router:相關配置

base

• 類型: string

• 默認值: "/"

  應用的基路徑。例如，如果整個單頁應用服務在 /app/ 下，然后 base 就應該設為 "/app/"。

base: process.env.BASE_URL,

上面代碼是vue-cli自動生成的配置，看到這里我就想修改BASE_URL，通過新建.env環境變量文件

環境變量

你可以在你的項目根目錄中放置下列文件來指定環境變量：

.env                # 在所有的環境中被載入

只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 開頭的變量將通過 webpack.DefinePlugin 靜態地嵌入到客戶端側的代碼中

　然后我在.env中修改BASE_URL，完全不起作用，隨意設個VUE_APP_的變量是可以實現的，后來我發現了下面這段話，試着只修改vue.config.js 中的 publicPath

• BASE_URL - 會和 vue.config.js 中的 publicPath 選項相符，即你的應用會部署到的基礎路徑。

vue-cli配置

publicPath

• Type: string

• Default: '/'

默認情況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上，例如 https://www.my-app.com/。如果應用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑。例如，如果你的應用被部署在 https://www.my-app.com/my-app/，則設置 publicPath 為 /my-app/。

修改vue.config.js 中的 publicPath后，得以實現配置服務的基路徑。