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