VUE Cli3的多環境配置

1.創建環境env文件

文件	說明	備注
.env	vue-cli-service build 時 , 默認的配置	默認的 npm run build = vue-cli-service build
.env.development	vue-cli-service serve 時 ,默認的配置	默認的 npm run serve = vue-cli-service serve
.env.{mode}	下文以mode = dev為例

 

  

.env文件中變量命名 必須以 VUE_APP_ 開頭

例子(.env.dev) :

VUE_APP_DATA_TEST=TRUE
VUE_APP_REQUEST_URL='/api'
VUE_APP_REQUEST_DEMO='http://172.18.0.95:8073'

 

2.修改package.json

增加dev的配置 ,如下 ,增加配置dev , 注意后面帶了個參數 --mode dev

這個mode,對應環境變量文件中的{mode}

"scripts": {
    "serve": "vue-cli-service serve --open",
    "dev": "vue-cli-service serve --open --mode dev",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
}

 

3.vue.config.js中引用環境變量

如下例子 , 可以使用 process.env.VUE_APP_REQUEST_DEMO 來訪問環境變量中的值

module.exports = {
devServer: {
    open: true, //是否自動彈出瀏覽器頁面
        host: "localhost",
        port: '8080',
        https: false,
        hotOnly: false,
        proxy: {
        '/api': {
            target: process.env.VUE_APP_REQUEST_DEMO,
                ws: true, //代理websockets
                pathRewrite: {
                '^/api': '' // remove base path
            },
            changeOrigin: true
        }
    }
}
};

 

如上配置 , 便可執行下面的命令 : 

#執行開發環境
npm run dev