关于如何以及为什么要构建多页vue应用，我们在上一篇文章中已经介绍过，感兴趣的请参考构建多页vue应用。本文我们要介绍的是，对于一个多页应用，如何单独打包其中一个（或几个）页面。
一般来说，多页应用不需要打包单个页面，这多个页面可以作为整个应用直接放在静态资源服务器上。不过我们也说过，多页应用的每个页面也可能会放在不同的服务器上，这时候如果往每个服务器上都放置完整的资源包，就会显得过于臃肿。于是我们可能就需要将某个页面单独打包出来。
诚然，有一个很明显的方法，就是在每次打包的时候直接删掉vue.config.js的pages字段里不相关的页面，如：
module.exports = { pages: { page1: {...}, // page2: {...}, // page3: {...} } }
显然，这样打包出来的结果就是只有page1页面了。
但是每次打包都删改配置文件并不是一种很优雅的做法。我们需要的方案是有多个打包命令，执行对应的打包命令即可打包对应的页面，这样我们就可以不再改配置文件了。下面我们来介绍这种方法：
二、实现过程
要实现通过不同的打包命令来打包单独的页面，需要先从打包命令本身说起。
1. 配置打包指令(指定打包模式)
我们执行的打包命令为npm run build，这个命令执行的是package.json的scripts字段下的build命令，它的原始值如下：
{ ... "scripts": { ... "build": "vue-cli-service build" } ... }
也就是说，这个命令实际上是在调用vue-cli-service服务的build命令。
根据vue-cli的文档介绍，build命令后面可以跟一个mode参数，定义打包模式，默认的打包模式包括production、development和test三个，它们的行为主要是把全局的process.env.NODE_ENV变量置为对应的值（即production、development和test）。在省略mode参数的情况下，默认值是production，即生产模式。
除了这三个默认模式外，我们还可以自定义打包模式。假如我们想定义一个专门打包page1的打包模式，就可以这样一个指令：
"scripts": { "build-page1": "vue-cli-service build --mode page1" }
我们希望，当执行npm run build-page1命令时，webpack就会自动把page1打包出来。
但显然只修改这里是不够的，webpack并不知道page1是什么模式，以及它应该有哪些行为。接下来我们需要为page1这个打包模式定义行为。
2. 定义模式行为
启用一个打包模式的本质含义，其实是启用一组特定的环境变量。
比如，production模式会把process.env.NODE_ENV的值置为production，而process.env是webpack所在的node环境提供的全局变量。这样，在代码中，只需要根据process.env.NODE_ENV的值就可以判断当前处于哪种打包模式了，代码可以根据不同的打包模式产生不同的行为。
对于自定义的打包模式，我们也可以指定一组全局变量，以使代码产生不同的行为。vue-cli文档规定，每个自定义模式对应的变量应该定义在根目录下的.env.xxx文件内。比如我们的打包模式名为page1，那么就需要在项目根目录下新建一个.env.page1（注意，这里是没有后缀的）文件：
当指定打包模式为page1时，webpack就会启用这个文件中所定义的变量。文件内可以这样定义变量：
.env.page1
NODE_ENV = 'production' page = 'page1'
现在，当使用打包模式page1时，webpack就会读取这个环境文件，然后把这里定义的变量逐个添加到全局对象process.env上。因此此时process.env.page的值就是字符串'page1'（NODE_ENV的值默认就是production，这里可以省略）。
向全局变量注册了变量page之后，我们就可以在程序中根据它定义打包行为了。
3. 定义打包逻辑
之前我们定义多页应用的配置时，pages字段配置的是固定的值，也就是定义了三个打包入口。现在有了全局变量process.env.page，我们就不需要设为定值了，而是可以根据这个变量的值，动态定义打包入口。此时vue.config.js可以进行如下改造：
function resolvePages(page){ let page1 = { entry: 'src/pages/page1/main.js', template: 'public/index.html', filename: 'page1.html', }; let page2 = { entry: 'src/pages/page2/main.js', template: 'public/index.html', filename: 'page2.html', }; let page3 = { entry: 'src/pages/page3/main.js', template: 'public/index.html', filename: 'page3.html', }; return page === 'page1' ? { page1 } : { page1, page2, page3 }; } module.exports = { pages: resolvePages(process.env.page), }