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

Posted 2022-01-05 帅到要去报警

在做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\'

如何调用这些配置呢？

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;

打完收工！