Vue(CLI3.0)多环境配置问题2020

vue-cli3.0多环境配置

通常开发运行项目时候只需要一个'development'（开发环境），打包时候却需要打'n种环境'（测试环境、uat环境、正式环境）的包，废话不多说进入主题，配置打多种 环境的包

第一步

在根目录下创建'.env.development'（开发环境）、'.env.production'（生产环境）'， 这里的'.env'后面的名字可以自己随便起，但是默认是有2种环境（development、production），如果想多增加别的环境就手动创建新的.env文件即可

截屏2020-05-20下午4.33.57.png

在对应的环境文件(.env.development、.env.production、.env.uat)中配置对应的环境的服务器地址即可

第二步

修改package.json文件

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode local",
    "build--prod": "vue-cli-service build --mode production",
    "build--dev": "vue-cli-service build --mode development",
    "lint": "vue-cli-service lint",
  },

第三步

使用 在axios封装的js配置文件中修改

baseURL: process.env.VUE_APP_BASE_API // 配置axios请求服务器地址