vue.js 多种打包场景的配置

一. 认识 vue.js 中的webpack 配置文件

vue.js 开发环境与正式打包是两个 webpack 配置文件处理的。

这两个配置文件，作为开发者大佬肯定不陌生， 但是对于刚刚入门vue.js 的朋友们，肯定有些疑惑， dev配置文件，则是开发时的配置文件， prod 是打包时的文件。 还有一个 webpack.base.conf.js 文件则是公用的配置， 这里不过多解释 ， vue.js 很多的配置已经给我们做好了，所以我们不用太去管里面的内容是什么。 （小提示：如果开发环境要配置成https 协议，也可以在dev.conf.js 中配置哟。）

二. vue.js config 文件夹说明

其实 vue.js 已经有个专门配置 开发环境与正式环境的配置文件夹。

dev.env.js 与 prod.env.js 很少去动，甚至不会去动。 但是这次的配置，离不开这两个配置文件。

index.js 则不用过多说明， 你们都认识他（如果新手朋友有困扰可以留言问我，能一下百度出来的就别找我了， 人人都讨厌伸手党）。

三. 配置开发环境与正式打包地址

1. dev.env.js / prod.env.js 中添加一个配置存放 API 地址的字段。 字段名一点要保证一致。 我这里用 API_ROOT

注： 这里有个大坑。 单引号中的双引号一定要保留， 不保留会出现你意想不到的事，你们自己去试吧。

2. 在项目中引用我们配置的API接口地址。

每个项目我都喜欢建一个config文件夹，配置信息，这样后期更改不会到处找， 如果你们没有这样的习惯的话，也可以直接 axios 中引用配置的地址。

3. process.env 是哪里来的？

这个 process.env 是webpack 暴露出来的全局对象。webpack的两个配置文件中可找到

webpack.prod.conf.js 配置示例：

let env = require('../config/prod.env')
...
plugins: [
 new webpack.DefinePlugin({ 'process.env': env }),复制代码

webpack.DefinePlugin 配置详情 机票

可以发现我们配置的js 文件被webpack给全局暴露出来了。

webpack.dev.conf.js 也是一样的， 这就是为什么需要用相同的字段名称。

好了。开发环境与正式打包就说完了。

四. 测试环境打包与正式环境打包配置

开导：这里的改变是建立在上一章的基础上的，多添加了一个测试环境的打包配置。 主要场景就是， 同时测试环境的打包与正式环境的打包。

1. config的配置均不变。 这次改动主要更改webpack 中的配置。

2. 因为都是打包配置，所以这次只会更改 webpack.dev.conf.js 文件

3. yarn build 默认打包正式环境。 yarn build dev 打包测试环境

这里补充一个小知识。 获取 输入命令后的参数。 process.argv

4. 知道如何获取命令的参数了。 我们便要区分当前的 BASE_API 是正式还是测试的。

const devEnv = require('../config/dev.env')
// 因为要更改 所以我们要把 const 更换为 let
let env = require('../config/prod.env')
// 获取命令参数时前两个无用的参数需要去掉，然后取第一个参数，也可以不截取，取下标3的数据 

const spliceParam = process.argv.splice(2)[0]
// 如果有参数，并且还是dev，则替换接口地址
if (spliceParam === 'dev') {
 env.BASE_API = devEnv.BASE_API
}复制代码

五. 多种打包环境，秘密级武器了，很少遇见。

开导：这里的改变也是建立在上一章的基础上的，多添加了不同环境的打包配置。 主要场景就是，需要打包多个不同接口地址环境的打包。

1. 因为多个环境比较特殊，所以更改的地方比较多。

3. 我们需要多添加一个标识来获取 不同场景的接口地址。 【API_KEY】

prod.env.js 示例：

module.exports = {
 NODE_ENV: '"production"', 
 API_KEY: '"production"', // 指定 API key, 获取不同的 地址。 
 // 打包 URL 地址配置 
 dev: '"http://test.cc/api"', // 请勿删除该条数据。 
 production: '"http://18.*****.122:8089"', // 请勿删除该条数据 
 fishpond: '"http://18.****:8111"', 
 megatron: '"http://18.*****.122:8222"'}复制代码

dev.env.js 示例：

const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {  

 NODE_ENV: '"development"', 
 API_KEY: '"dev"', // dev 配置。 默认都是 dev
})复制代码

细心的小伙伴，能发现dev 其实引用了 prod的配置文件的。我们是通过API_KEY来获取接口地址的。为了不影响上线数据，所以 我们要把dev的API_KEY 则设置 dev。 这样它就会覆盖掉 prod的配置。

4. 获取接口地址结构改变了，那我们又如何引用呢？

const processEnv = process.envexport 
const BASE_URL = processEnv[processEnv.API_KEY] // 基本请求地址， 更改方式在 prod.env.js 中复制代码

很简单，通过表达式就能直接获取当前环境的接口地址了

5. 每次更改prod的API_KEY 很麻烦？我们再优化一下， 使用命令直接打包。

// 不同的选项，引用不同的包。
let env = require('../config/prod.env')
const spliceParam = process.argv.splice(2)[0] // 拼接参数
// 如果存在拼接参数，则判断当前接口是否存在
if (spliceParam) {
 if (env[spliceParam]) {
 env.API_KEY = env[spliceParam]
 } else {
 throw new Error(`当前打包参数:${spliceParam},URL未指定, 请先在/config/prod.env.js 中配置`)
 }
} else { 

 if (!env[env.API_KEY]) {
 throw new Error(`当前打包参数:${env.API_KEY}, URL未指定, 请先在/config/prod.env.js 中配置`)
 }
}复制代码

这样就能愉快的使用命令打包了。 yarn build dev、yarn build fishpond...

当然加入判断地址是否存在，是为了防止输入错误，导致项目发布无法正常请求的情况。

六. 关于打包的配置，就这么多了。 如果你有很好的方式，欢迎分享与留言。 如果代码中有不正确的使用，也同时欢迎指出，共同进步。

七. 转发请注明出处，谢谢。