vue---不同环境下的配置

在做VUE项目开发的时候，项目会在不同环境下运行。

常见的三种环境：

1、本地开发环境。
2、测试发布环境。
3、线上生成环境。

在不同的环境下，进行打包、部署调用API以及参数配置是不同的。

如果每次进行打包的或运行的时候都要去手动修改代码，显然是不明智的。

那么有没有一种可以通过在不同的环境下调用不同的API以及参数配置的方法呢？

答案是坑定的。

在 package.json 可以设置不同的业务场景：

"scripts": {
  "dev": "vue-cli-service serve", // 开发环境
  "build:prod": "vue-cli-service build", // 生产环境
  "build:stage": "vue-cli-service build --mode staging" // 测试环境
}

在项目的根目录新增对应的配置文件

不同的业务环境，对应不同的配置文件：

解释：--mode staging 就是在指定的环境模式 staging 会调用 .env.staging 配置。

默认不指定规则，开发环境为 development ，生成环境为 production

具体配置文件如下：

env.development

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/'

env.production

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = '/test'

如何配置进行配置呢？

属性名必须以 VUE_APP_ 开头，比如：VUE_APP_XXX

如何调用这些配置呢？

process.env.ENV
process.env.VUE_APP_BASE_API

示例：

module.exports = {
  publicPath: process.env.BASE_URL,
  devServer: {
    proxy: process.env.VUE_APP_SERVER
  }
};

判断不同的环境：

if (process.env.VUE_APP_ENV !== 'development') {
  axios.defaults.baseURL = process.env.VUE_APP_SERVER;
}

打完收工！