在我們日常的開發過程中生產模式和測試等的介面地址是不一樣的；所以我們就需要配置開發環境和測試環境還有生產環境；便於我們日常開發的使用；

第一步：在專案的根目錄建立以下的三個檔案

第二步：

.env.development（開發環境）

NODE_ENV = 'development'  //模式VUE_APP_MODE = 'development'  // 用來區分環境

.env.test（測試環境）

NODE_ENV = 'production'VUE_APP_MODE = 'test'outputDir = test

.env.production（生產環境）

NODE_ENV = 'production'VUE_APP_MODE = 'production'

第三步：對vue.config.js新增一下程式碼；如果沒有這個檔案就在根目錄下建立一個檔案即可

module.exports = {    // 基本路徑,相對路徑    publicPath: "./",    // 輸出檔案目錄    outputDir: process.env.outputDir,}

第四步：在package.json 中的 scripts 中複製一下程式碼使用即可

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

做到這兒的時候；基本上就配置完成了；重啟一下專案即可

然後在需要引入介面地址的地方輸入

process.env.VUE_APP_MODE

根據這個可以看到目前是什麼環境；然後配置介面地址就好了

const env = process.env.VUE_APP_MODEif (env === 'development') {  envConfig = require('./dev').default  } else if (env === 'test') {  envConfig = require('./test').default} else {  envConfig = require('./prod').default}

require('./test').default ；表示的是一個檔案程式碼；

如果這個沒明白的話；可以這樣理解；在判定是哪個環境以後就把對應的檔案裡面的程式碼拿過來也就是

現在就配置成功了；

npm run build  // 打包

npm run test // 測試打包

npm run publish // 測試和生產一起打包