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,以便在项目中使用。

你可能感兴趣的:(vue-cli3 配置不同环境请求地址,以及打包到不同文件夹)