一、配置不同環(huán)境請求地址

1.在根目錄下新建環(huán)境文件，根據(jù)項目需求新建。一般為 .env.development, .env.test, .env.production, 對應 開發(fā)環(huán)境，測試環(huán)境，生產(chǎn)環(huán)境。

.env.development

NODE_ENV = development
VUE_APP_API_URL = 開發(fā)環(huán)境請求地址

.env.test

NODE_ENV = test
VUE_APP_API_URL = 測試環(huán)境請求地址

.env.production

NODE_ENV = production
VUE_APP_API_URL = 生產(chǎn)環(huán)境請求地址

2.配置 baseURL

const service = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  timeout: 1000 * 5, // request timeout
});

如果一個環(huán)境中，有多個不同請求地址，可以在環(huán)境配置文件中多配置幾個 url，使用時，不配置 baseURL，相同請求地址接口寫入一個文件，引入相應的 url，接口前單獨加 url。

import axios from 'axios'
const baseUrl = process.env.VUE_APP_API_URL;
axios.get(`${baseUrl}/接口名`);

二、打包

1.配置不同環(huán)境打包命令

package.json scripts 配置

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode production",
    "test": "vue-cli-service build --mode test"
 },

serve 命令不攜帶 --mode 時，默認運行環(huán)境為 development
build 命令不攜帶 --mode 時，默認運行環(huán)境為 production

2.配置打包到不同文件夾

可根據(jù)當前環(huán)境寫死，也可在環(huán)境配置文件中，加入打包到的文件夾名（有多個環(huán)境的時候比較方便）。

// 環(huán)境配置文件寫入 以 .env.test 為例
VUE_APP_OUTPUT = test

vue.config.js 配置

// 自定義打包文件，以 dist 結尾，方便 .gitignore 配置 且不易與代碼文件夾沖突
const outputDir = process.env.VUE_APP_OUTPUT ? process.env.VUE_APP_OUTPUT + '_dist' : 'dist'
module.exports = {
  outputDir: outputDir,
}

打包出來的文件不提交到 git 的話，配置 .gitignore。將之前的 /dist 改為 /*dist

TIPS:

• 配置文件的后綴與 package.json 的 scripts 的 --mode 的值要相等
• 配置文件的變量必須以 VUE_APP_ 開頭，表明是自定義變量。除此之外，還有特殊變量，一直都可以使用。

NODE_ENV -  "development"、"production" 或 "test" 中的一個。具體的值取決于應用運行的模式。

• 配置文件中的變量，使用用 process.env.變量名 讀取
• 如果當前的 process.env.NODE_ENV 不能滿足需求，可靈活配置其他對環(huán)境的說明變量，如 VUE_APP_ENV_DESC，以便在項目中使用。