【vuejs cli3最佳实践系列】vuejs cli3 env配置文件实践指南

项目背景

项目地址 https://github.com/wsdo/vuejs...

文章首发： https://shudong.wang/10352.html

env文件

配置四个环境名字分别

VUE_APP_ENV=dev

只支持：VUE_APP_ 开头，比如设置其它变量 VUE_APP_NAME=stark

package.json 配置 方式

"scripts": {
    "start": "npm run dev",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "dev": "vue-cli-service serve --mode dev",
    "test": "vue-cli-service build --mode test",
    "pre": "vue-cli-service build --mode pre",
    "prod": "vue-cli-service build --mode prod",
    "lint": "vue-cli-service lint"
  },

项目中使用方式

启动方式

npm start // 默认dev
npm run test // test 环境
...
以此类推

项目中读取方式

通过 process.env 获取设置的变量
比如：console.log('当前的环境是',process.env.VUE_APP_ENV)

应用场景

• 可以在项目中设置，配置的，api host base url ，api 基础接口
• 需要根据环境变量设置的参数