# vue cli 3.0 多环境配置

vue cli 3.0 多环境配置

1,生成vue cli 3的项目 在跟目录自己创建 .env.[name](注意:name即为你的环境的名字)的文件
# vue cli 3.0 多环境配置_第1张图片
2,`现在我们拿测试环境做举例。.env.test的内容

VUE_APP_NAME="测试环境"
VUE_APP_TITLE="test"
VUE_APP_HOST="http://http:test.com"
VUE_PLATFORM="app"

我们在使用这些环境变量直接取process.env就可以了 列如:

let baseUrl=process.env.VUE_APP_HOST;

3,配置packgejson 配置的环境加上–mode即可

 "serve": "vue-cli-service serve",
    "dev": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build --mode prod",
    "test": "vue-cli-service build --mode test",
    "prep": "vue-cli-service build --mode prep",
    "lint": "vue-cli-service lint"

亲测自己项目使用

你可能感兴趣的:(前端开发)