vue-cli3 配置不同环境请求地址，以及打包到不同文件夹

一、配置不同环境请求地址

1.在根目录下新建环境文件，根据项目需求新建。一般为 .env.development, .env.test, .env.production, 对应 开发环境，测试环境，生产环境。

.env.development

NODE_ENV = development
VUE_APP_API_URL = 开发环境请求地址

.env.test

NODE_ENV = test
VUE_APP_API_URL = 测试环境请求地址

.env.production

NODE_ENV = production
VUE_APP_API_URL = 生产环境请求地址

2.配置 baseURL

const service = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  timeout: 1000 * 5, // request timeout
});

如果一个环境中，有多个不同请求地址，可以在环境配置文件中多配置几个 url，使用时，不配置 baseURL，相同请求地址接口写入一个文件，引入相应的 url，接口前单独加 url。

import axios from 'axios'
const baseUrl = process.env.VUE_APP_API_URL;
axios.get(`${baseUrl}/接口名`);

二、打包

1.配置不同环境打包命令

package.json scripts 配置

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode production",
    "test": "vue-cli-service build --mode test"
 },

serve 命令不携带 --mode 时，默认运行环境为 development
build 命令不携带 --mode 时，默认运行环境为 production

2.配置打包到不同文件夹

可根据当前环境写死，也可在环境配置文件中，加入打包到的文件夹名（有多个环境的时候比较方便）。

// 环境配置文件写入 以 .env.test 为例
VUE_APP_OUTPUT = test

vue.config.js 配置

// 自定义打包文件，以 dist 结尾，方便 .gitignore 配置 且不易与代码文件夹冲突
const outputDir = process.env.VUE_APP_OUTPUT ? process.env.VUE_APP_OUTPUT + '_dist' : 'dist'
module.exports = {
  outputDir: outputDir,
}

打包出来的文件不提交到 git 的话，配置 .gitignore。将之前的 /dist 改为 /*dist

TIPS:

• 配置文件的后缀与 package.json 的 scripts 的 --mode 的值要相等
• 配置文件的变量必须以 VUE_APP_ 开头，表明是自定义变量。除此之外，还有特殊变量，一直都可以使用。

NODE_ENV -  "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。

• 配置文件中的变量，使用用 process.env.变量名 读取
• 如果当前的 process.env.NODE_ENV 不能满足需求，可灵活配置其他对环境的说明变量，如 VUE_APP_ENV_DESC，以便在项目中使用。