vue项目配置环境变量

环境变量的理解：
前后端分离的项目中，前端会有很多环境：测试环境，灰度环境，正式环境等，我们的项目再上线的时候会发布不同到不同的环境中去测试，当每个环境都需要打包的时候，手动修改配置就很繁琐而且难免出错，比如每个环境对应的服务器地址不同。所以使用环境变量来区分不同环境。

解决： 在根目录下创建.env.xxx文件，例如.env.test测试环境 .env.development 开发环境,.env.production 正式环境,.env.long灰度环境。

第一步：创建 .env.development 和 .env.production文件，与 package.json 文件同级,这两个是环境自带的，为了满足上面说的环境我们还需要自己定义env文件，例如.env.dev(开发环境) .env.prod(正式环境) .env.long(灰度环境) .env.test(测试环境)

第二步：在.env 配置文件中 配置接口地址，通过给 VUE_APP_BASE_URL 赋值，名称可以写多个但是注意必须以VUE_APP_开头(VUE_APP_xxx)，如下代码所示

# env.dev文件
VUE_APP_BASE_URL = "//dev.api.saas.com"

#.env.prod文件
VUE_APP_BASE_URL = "//api.saas.com"

#.env.long文件
VUE_APP_BASE_URL = "//long.api.saas.com"

#.env.test文件
VUE_APP_BASE_URL = "//test.api.saas.com"

第三步 ：package.json中配置
默认的配置

"scripts": {
    "serve": "vue-cli-service serve",//默认就是 development开发环境
    "build": "vue-cli-service build", //默认就是 production生产环境
  },

自定义env文件在 package.json中配置，增加对应的 serve 和 build 命令,通过 --mode选项标志来覆盖命令使用的默认模式
–mode dev 必须要有对应的env文件，如果找不到就会默认.env.develpment,server 后面的名字随便取的。

在 package.json中配置代码

"scripts": {
    "serve:dev": "vue-cli-service serve --mode dev ",//就是 env.dev 环境
    "serve:prod": "vue-cli-service serve --mode prod", //就是 env.prod 环境
    "serve:long": "vue-cli-service serve --mode long",//就是 env.long 环境
    "serve:test": "vue-cli-service serve --mode test",//就是 env.test 环境
 
    "build:dev": "vue-cli-service build --mode dev",//就是 env.dev 环境
    "build:prod": "vue-cli-service build --mode prod",//就是 env.prod 环境
    "build:long": "vue-cli-service build --mode long",//就是 env.long 环境
    "build:test": "vue-cli-service build --mode test",//就是 env.test 环境
  },