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"
}

新增webpack配置文件

在项目根目录下的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
> [email protected] 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赋值不同环境对应的地址，达到自动化的效果