超简单Vue-cli3区分环境打包

Vue-cli3区分开发、测试、生产等不同环境的包

在开发中，我们的项目肯定是要区分不同环境的，而不同环境使用的接口前缀肯定也是不同的，这就需要我们分不同环境打不同的包，这里以大多数的（开发，测试，生产）为例，直接上代码粘贴复制即可使用。

一 、需要新建的配置文件

1、开发环境配置文件

在根目录下 创建：.env.development （别少了最前面的点）

NODE_ENV = 'development'
VUE_APP_FLAG = 'development' // 用来根据不同情况配置接口前缀
outputDir = 'sit' // 打包后放到哪个文件下

2、测试环境配置文件

在根目录下 创建：.env.uat （别少了最前面的点）

NODE_ENV = 'production'
VUE_APP_FLAG = 'test' // 用来根据不同情况配置接口前缀
outputDir = 'uat' // 打包后放到哪个文件下

3、生产环境配置文件

在根目录下 创建：.env.production （别少了最前面的点）

NODE_ENV = 'production'
VUE_APP_FLAG = 'production' // 用来根据不同情况配置接口前缀
outputDir = 'dist' // 打包后放到哪个文件下

可以根据需求添加多个 (.env后面的可以自定义，叫什么都可以，它用来配置打包命令，一致即可)
4、打包文件输出目录配置文件

在根目录下 创建：vue.config.js

module.exports = {
	// 输出文件目录名称
    outputDir: process.env.outputDir,
}

二 、根据配置去动态改变接口前缀

1、创建文件 env.js

const dev = {
  baseUrl: "开发环境的接口地址",
  cdnUrl:"开发环境的cdn地址",
};

const uat = {
  baseUrl: "测试环境的接口地址",
  cdnUrl:"测试环境cdn地址"
};

const prod = {
  baseUrl: "生产环境的接口地址",
  cdnUrl:"生产环境cdn地址"
};

let type = {}
if(process.env.VUE_APP_FLAG == "development"){ // 必须与创建的配置文件第二行的名字相对应
  type =  dev
}else if(process.env.VUE_APP_FLAG == "test"){ // 必须与创建的配置文件第二行的名字相对应
  type =  uat
}else if(process.env.VUE_APP_FLAG == "production"){ // 必须与创建的配置文件第二行的名字相对应
  type =  prod
}
export default type

三 、请求封装ajax的时候引入env.js

此处因为个人习惯不同，封装放的位置不同，需要找到封装ajax文件的axios.create位置，将里面的baseURL写成动态的，以我的为例

import axios from "axios";
import env from "./env";

const AJAX = axios.create({
  baseURL: env.baseUrl,
  timeout: 3000,
});

四 、配置打包命令

目标文件：package.json，找到打包命令的地方，将其修改 --mode后跟着的名字与.env后你起的名字要一致

"scripts": {
    "serve": "vue-cli-service serve",
    "dev": "vue-cli-service serve --disable-host-check",
    "build": "vue-cli-service build && vue-cli-service build --mode uat && vue-cli-service build --mode development",
    "uat": "vue-cli-service build --mode uat",
    "sit": "vue-cli-service build --mode development"
  },

至此，完毕，以上代码可以放心食用，复制粘贴使用自己的地址即可使用。