vue分环境打包-白红宇

说明

本文代码中的配置基于vue-cli2

需求

在实际开发中我们可能有测试环境一套请求API 和正式环境一套API，尤其是两个环境的域名不同时，就需要我们分环境打不同配置的包

了解 webpack.DefinePlugin 插件

此插件可以在打包时定义环境变量，在开发时我们也能在代码中获取定义的环境变量。

用法：

单独配置

plugins: [    new webpack.DefinePlugin({      'process.env.mode': '"development"'    })    ...]复制代码

写成对象

plugins: [    new webpack.DefinePlugin({      'process.env': {        NODE_ENV: '"development"',        EVN_CONFIG: '"dev"',        API_ROOT: '"dev API_ROOT"'      }    })    ...]复制代码

写成配置文件

plugins: [    new webpack.DefinePlugin({      'process.env': require('../config/dev.env')    })    ...]复制代码

// /config/dev.env.js'use strict'const merge = require('webpack-merge')const prodEnv = require('./prod.env')module.exports = merge(prodEnv, {  NODE_ENV: '"development"',  EVN_CONFIG: '"dev"',  API_ROOT: '"dev API_ROOT"'})复制代码

在vue-cli2 中/build/webpack.dev.conf.js 文件引用了 /config/dev.env.js文件的配置作为环境变量，因此我们执行npm run dev时（执行/build/webpack.dev.conf.js）就可以在我们开发代码中获得环境变量(console.log(process.env)试一试)

然后我们观察/build/webpack.prod.conf.js(npm run build时执行)

//  /build/webpack.prod.conf.jsconst env = require('../config/prod.env')...new webpack.DefinePlugin({  'process.env': env}),复制代码

可见打包时使用的是/build/webpack.prod.conf.js文件配置作为环境变量

安装 `cross-env`

npm install --save-dev cross-env

统一了不同操作系统设置环境变量的方式. 用法：

"scripts": {    "build": "node build/build.js",    "build:test": "cross-env NODE_ENV=production env_config=test node build/build.js", //设置了环境变量 NODE_ENV 和 env_config    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js", //设置了环境变量 NODE_ENV 和 env_config  }复制代码

开始配置

由上面分析，我们得到，要分环境打包，我们针对不同的环境去配置不同的环境变量就可以了。

我们先修改scripts脚本

// package.json"scripts": {  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",  "start": "npm run dev",  "build": "node build/build.js",  "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"},复制代码

我们设置了两个环境变量 NODE_ENV 和 env_config然后执行正常的打包。这里的环境变量设置是方便我们在webpack配置文件中使用

新建环境变量文件

新建在/config目录下新建test.env.js文件存放test的环境变量

//  /config/test.env.js'use strict'module.exports = {    NODE_ENV: '"testing"',    EVN_CONFIG:'"test"',    API_ROOT:'"/test/apis/v1"'}复制代码

修改 webpack.prod.config.js

我门注释掉

//const env = require('../config/prod.env')复制代码

修改成

//const env = require('../config/prod.env')const env_config = process.env.env_config || ''; //执行不同的打包脚本对应不同的env_config值switch (env_config){  case 'test':         var env= require('../config/test.env');        break;  case 'prod':         var env= require('../config/prod.env');        break;  default:      var env= require('../config/prod.env');}...复制代码

在代码中使用

// Home.vueaxios.get(process.env.API_ROOT) ...复制代码

在不同环境中使用CDN

webpack 提供一个非常有用的配置，该配置能帮助你为项目中的所有资源指定一个基础路径。它被称为公共路径(publicPath)

我们修改webpack中的 publicPath 来让资源引用地址改为cdn 观察vue-cli我门发现publicPath写在了 /config/index.js文件的build对象中，所以我们修改如下

...const testCDN = 'https://testcdn.com';const prodCDN = 'https://prodcdn.com';build: {  assetsPublicPath: process.env.env_config=='test'?testCDN:prodCDN}复制代码

也可以将cdn地址统一写在上文中的环境配置文件中

var prodEnv = require('./prod.env');var testEnv = require('./test.env');...build: { assetsPublicPath: process.env.env_config=='test'?testEnv.FILE_CDN:prodEnv.FILE_CDN,}复制代码

总结

整体思路就是建不同的打包脚本，然后根据不同的打包脚本，应用相应的环境变量配置文件

说明

需求