vue中配置開發環境、測試環境、生產環境

前言：開發過程、測試過程、生產過程使用的接口地址不能，還有執行的操作可能也不一樣，也就需要實現配置好開發環境、測試環境、生產環境，需要什麼環境下的配置直接使用即可。

1、根目錄下新建文件：.env.development（開發環境）、.env.test（測試環境）、.env.production文件（生產環境）

2、三個配置文件的配置內容如下：

.env.development（開發環境）配置內容

NODE_ENV = 'development'  //模式
VUE_APP_MODE = 'development'  //通過"VUE_APP_MODE"變量來區分環境
VUE_APP_API_URL = 'http://192.****:8008/api/' //api地址

.env.test（測試環境）配置內容

NODE_ENV = 'production'
VUE_APP_MODE = 'test'
VUE_APP_API_URL = 'http://xxx.xxx.xxx.xx:8008/api/'
outputDir = test

.env.production文件（生產環境）配置內容

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL = 'http://xxx.xxx.xxx.xx:8008/api/'

3、修改vue.config.js

module.exports = {

    // 基本路徑,相對路徑
    publicPath: "./",
    // 輸出文件目錄
    outputDir: process.env.outputDir,

4、修改package.json文件

    "test": "vue-cli-service build --mode test", //打包測試環境
    "publish": "vue-cli-service build && vue-cli-service build --mode test", //測試和生產一起打包

5、判斷並使用不用的開發環境配置

if(process.env.VUE_APP_MODE==='development'){
    //開發環境下的執行操作
}else if(process.env.VUE_APP_MODE==='test'){
    //測試環境下的執行操作
}else{
    //生產環境下的執行操作
}