vue3.0 多環(huán)境配置

最常見的多環(huán)境配置，就是開發(fā)環(huán)境配置,和生產(chǎn)環(huán)境配置(也就是上線的配置)，很多情況下我們開發(fā)環(huán)境下的域名，和一些配置項,和我們生產(chǎn)模式下的不同裤纹，這個時候就需要我們進行多環(huán)境配置，不然每次發(fā)版都要改一波數(shù)據(jù)多麻煩丧没。另一種情況就是你兩個項目是用的一套代碼鹰椒，但是最后又要分別打成不同的包，那么這個時候多環(huán)境配置就大大提升了開發(fā)效率呕童。

配置文件創(chuàng)建位置

.env 文件創(chuàng)建在 vue 項目的根目錄下漆际，和 package.json同級，如下圖所示：

vue項目根目錄

.env 文件配置

.env 文件的命名方式

網(wǎng)上大部分都說是命名為： .env.dev/ .env.prod/ .env.test

但 .env 格式的命名并不局限于這三種夺饲，他的命名方式可以多種多樣奸汇，只需要文件開頭為.env ，后面的名字你想怎樣都可以往声。

特殊的命名方式：

.env.pord 打包 vue 會壓縮代碼擂找，另外兩種命名方式在 vue 中沒有做特殊處理。
.env 默認 vue 配置文件
.env.***.local git 會忽略

.env文件的配置

可以在文件里填寫任何想要的東西浩销，如想在項目全局都能獲取到名字贯涎，便可直接在 .env 里配置。默認的調(diào)試慢洋，打包命令都直接調(diào)用 .env 文件里的配置塘雳。

.env 文件配置：

//以 VUE_APP_*** 的形式命名，后面大寫還是小寫都可以
NODE_ENV=production
VUE_APP_SERVER=http://127.0.0.1:8080
VUE_APP_NAME = "飛云"
VUE_APP_ABBREVIATION = "fy"
VUE_APP_LOGO = "fy"

默認的調(diào)試普筹，打包命令都會調(diào)用 .env 格式

npm run build
npm run serve

當(dāng)配置文件 NODE_ENV=development 時, build 的 dist 文件為 vue 創(chuàng)建項目時的初始頁面粉捻，原因可能是因為前端開始時不用打包，只有發(fā)布到測試環(huán)境和生產(chǎn)環(huán)境時需要打包斑芜。

配置運行環(huán)境

在 vue 項目 src 目錄下的 main.js 文件引入的 axios 命令下方，直接定義 axios 的 baseURL祟霍，即可在其他頁面中完成域名的切換杏头。

main.js

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "serve:linux": "vue-cli-service serve --mode linux",
    "build:linux": "vue-cli-service build --mode linux",
    "serve:local": "vue-cli-service serve --mode local",
    "build:local": "vue-cli-service build --mode local"
  },

build: 和 serve: 后面的名字要與 .env 后面接的名字對應(yīng) 盈包，這在運行的時候才能找到相應(yīng)的配置項。

.env是默認配置項醇王，當(dāng)運行環(huán)境配置項的時候呢燥，會將默認配置項和運行的環(huán)境配置項融合，在參數(shù)相同的情況下寓娩，會以環(huán)境配置項為主叛氨，簡單來說就是，默認配置項存在棘伴，環(huán)境配置項也存在寞埠，這個時候運行哪個環(huán)境配置項，就以哪個環(huán)境配置項的值為準(zhǔn)焊夸，如果默認配置項存在仁连，環(huán)境配置項不存在，那么運行環(huán)境配置項的時候同樣也可以拿到默認配置項的值阱穗。

運行指定的環(huán)境

根據(jù) package.json 中填寫的 key 來確認運行指定環(huán)境的命令饭冬。如 "build:linux": "vue-cli-service build --mode linux",

若想運行 .env.linux 配置環(huán)境來進行打包，則可輸入：npm run build:linux

也可通過 pycharm 的 npm 展示窗口直觀的看到命令的配置：

image.png

獲取配置信息

如想在 js 中拿到 VUE_APP_NAME = "飛云"揪阶，可直接在想賦值的地方寫上這行代碼即可 process.env.VUE_APP_NAME

修改 axios 請求地址支持多環(huán)境

引用 VUE_APP_SERVER

在頁面引入的 axios 命令下方昌抠，直接定義 axios 的 baseURL。

import axios from 'axios';
axios.defaults.baseURL=process.env.VUE_APP_SERVER;

頁面使用

修改頁面中調(diào)用 axios 的請求地址鲁僚，只留下路徑即可