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

在大多數項目情況下，需要在開發環境，測試環境，生產環境執行不同的操作，今天就來記錄下這三種環境在項目中需要怎樣配置。

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

 

 

 

2、三個環境對應的配置文件如下；

env.develpoment文件

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

 

env.production文件

NODE_DEV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URl = 'http://xxxxxxx'

 

env.test文件

NODE_ENV = 'test'
VUE_APP_MODE = 'test'
VUE_APP_API_URL = 'http://xxxxxx'
outputDir = test

　　

3、修改vue.config.js文件；

module.exports = {
  publicPath: './',
  outputDir: process.env.outputDir,
  devServer: {
    disableHostCheck: false,
    host: "",
    port: 8082,
    https: false,
    hotOnly: false,
    proxy: null
  }
}

　　

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{
    //生產環境下的執行操作
}

 

6.項目打包

npm run test //打包測試環境

npm run build //打包生產環境

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