Vue添加环境多环境

注：本篇博客是基于 vue-cli 2.9.6 版本

vue-cli默认自带 production 和development两种开发环境，但是在实际工作中一般还有 测试环境 、 预发布环境 等，可以修改 package.json 添加新的打包命令，可以从而根据不同环境自动切换接口的 BASE_URL, 所以本篇文章将以添加 测试环境 为例，演示如何添加环境

项目的环境变量文件都在项目根目录下的 config 文件夹下，默认有两种环境变量文件, 即 dev.env.js 和prod.env.js, 我们直接复制生产环境的配置文件 prod.env.js, 将其名称改为test.env.js 并将其中的 NODE_ENV 属性修改为自己想要的环境名称，这里以 test 为例, 记得加引号

'use strict'
module.exports = {
  NODE_ENV: '"test"',
  BASE_URL:"XXXXXXXX"
}

在项目根目录下的 build 文件夹下，复制 build.js 文件，并改名为test.js, 并按以下进行修改

process.env.NODE_ENV = 'test'
const spinner = ora('building for test...') // 打包时的提示文本

在项目根目录下的 build 文件夹下，复制 webpack.prod.conf 文件，并改名为webpack.test.conf, 并按以下进行修改

const env = require('../config/test.env')

找到项目根目录下的 package.json 文件，在 scripts 属性中添加一条指令

 "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "test": "node build/test.js" // 新增
  }

使用新指令进行打包

使用新添加的命令 npm run test 进行测试环境的打包

F:\Project\CZ4.2>npm run test
> cz@1.0.0 test F:\Project\CZ4.2
> node build/test.js
\ building for test...{parser: "babylon"} is deprecated; we now treat it as {parser: "babel"}.
/ building for test...

根据不同环境自动切换 api 地址

可以通过 axios 统一管理接口，然后 api 前面的地址部分，用一个变量 baseUrl 接受，process.env.NODE_ENV获取运行 / 打包时的环境，从而给 baseUrl 赋值不同环境对应的地址，达到自动化的效果

Vue添加环境多环境

新增新环境变量文件

新增 webpack 配置文件

给新环境添加打包指令

使用