vue-cli3 配置開發環境、測試環境、線上環境

00一、在package.json文件中添加

"scripts": {
    "serve": "vue-cli-service serve", //調用開發api
    "build": "vue-cli-service build", //上線
    "test": "vue-cli-service build --mode test",//須要添加的內容，測試
},

00二、在根目錄下建立.env文件，並配置

NODE_ENV = 'production'
VUE_APP_FLAG = 'pro' //vue代碼能夠直接使用VUE_APP_名字

00三、在根目錄下建立.env.test文件

NODE_ENV = 'production'
VUE_APP_FLAG = 'test'
outputDir = test  //能夠更改打包時輸出的目錄名字，默認爲dist

00四、在根目錄下建立vue.config.js

module.express = {
baseUrl: process.env.NODE_ENV === 'production' ? '/static/' : './',
devServe: {
port: 8080,
// disableHostCheck:true,//處理host不識別問題
},
baseUrl: '/', //基本路徑，不要隨意更改
outputDir: process.env.outputDir, // 打包生成目錄
assetDir: 'static',
lintOnSave: false,
runtimeCompiler: true, // 是否使用包含運行時編譯器的 Vue 構建版本
productionSourceMap: false, // 生產環境的 source map

}

00五、在main.js裏配置api變量

/*第一層if判斷生產環境和開發環境*/
if (process.env.NODE_ENV === 'production') {
    /*第二層if，根據.env文件中的VUE_APP_FLAG判斷是生產環境仍是測試環境*/
    if (process.env.VUE_APP_FLAG === 'pro') {
        //production 生產環境
        axios.defaults.baseURL = 'http://api.xinggeyun.com';//路徑

    } else {
        //test 測試環境
        axios.defaults.baseURL = 'http://192.168.0.152:8102';//路徑

} } else { //dev 開發環境 axios.defaults.baseURL = 'http://192.168.0.152:8102';//路徑

 }

最後npm run test 或者 yarn run test  

ps:我用了outputDir = test，可是打包後仍然是dist默認文件名。不知道緣由，若是有知道的，麻煩分享一下

最後，但願對你有所幫助！！

原文： http://www.javashuo.com/article/p-krdhxggr-ng.html

能夠參考： http://www.javashuo.com/article/p-ekcapnzd-hw.html