Vue项目针对测试、生产环境打包项目

摘要

npm run build作为vue项目的包构建指令在用vue-cli初始化项目时默认构建一个生产环境的包，但在实际项目的开发和部署中我们不仅仅只是开发环境和生产环境，介于两者之间的测试环境也是不可忽略的一部分。本文将对vue项目针对开发、测试、生产环境进行包的区分构建进行一些自己的讲述，若描述、理解有误欢迎指正。

新的改变

在刚接触vue时对包构建的过程没有过多的去关注，包的构建时依赖npm run build从测试环境贯穿到生产环境，接口API的配置则是在static中新建了一个config.js

// 将api地址作为添加到window对象下
window.config = {
  api: {
    apiUrl: 'https://fool.com/wapapi',
    Infversion: '1.0'
  }
}

完全不区分测试和生产环境，那么接口API地址是如何在测试和生产环境之间变更的呢？手动修改？No！肯定不是。这得感谢我强哥 @hknaruto在Jenkins自动部署时用脚本动态修改了API的值。但这种依托外界干涉的模式讲真的是非常傻，一点都不自动、一点都不智能。怪也怪自己以前的一成不变和墨守成规，其实说到底就是懒。确实，在搞技术上这种样子一点都不好…所以现在就开始来一些改变。

准备工作

安装cross-env依赖在终端执行

npm install --save-dev cross-env

关于依赖cross-env作为运行跨平台设置和使用环境变量的脚本，当执行build动作时通过设置、赋值环境变量告知当前构建包的是测试环境还是生产环境。
npm上对cross-env的说明

package.json

{
  "name": "demo",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "oops",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js",
    // 增加的test和prod 分别对应的是测试环境和生产环境的包构建指令
    "build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
  },
  ... ...
 }

env_config的值是区分的关键

config目录下的文件修改

test.env.js

module.exports = {
  NODE_ENV: '"testing"',
  ENV_CONFIG:'"test"',
  API_ROOT: '"http://test/api"'
}

dev.env.js

const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ENV_CONFIG:'"dev"',
  API_ROOT: '"http://development/api"'
})

prod.env.js

module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG:'"prod"',
  API_ROOT: '"http://production/"'
}

每个文件的API_ROOT的为对应环境中的API接口地址

build目录下文件修改

build.js

// const env = process.env.NODE_ENV === 'testing'
//   ? require('../config/test.env')
//   : require('../config/prod.env')
// +++++++++ 更改为动态获取env.config值 ++++++++++
const env = config.build[process.env.env_config+'Env']

其他文件的修改

main.js

Vue.prototype.$axios = axios //前提是安装好axios依赖
// 做到在全局区分不同应用环境使用对应的API
Vue.prototype.$api = process.env.API_ROOT

在接口调用中使用Axios+$api

// 全局
this.$axios.post(this.$api, data)
	.then(res => {
        console.log(res)
    })
    .catch(error => {
        console.log(error)
    })

检验

在终端中执行

npm run build:test
npm run build:prod