我们现在读取process.env.page的值进行判断，如果它的值是page1，那么说明我们处于page1打包模式下，于是resolvePages函数返回的对象仅包括page1这一个页面的入口，否则就返回三个打包入口，进行完整多页应用的构建。
基于这个原理，我们同样可以定义page2、page3的打包模式，甚至定义更加复杂的打包模式（如同时打包page1和page2），此时resolvePages函数的返回值只是稍微复杂一些：
return page === 'page1' ? { page1 } : page === 'page2' ? { page2 } : page === 'page1,page2' ? { page1, page2 } : ... { page1, page2, page3 };
现在一切准备就绪。
我们执行npm run build-page1命令时，vue-cli会先读取指定的page1模式对应的.env.page1文件，它会为process.env新增环境变量page。然后vue-cli会去读取vue.config.js配置文件中的pages字段，调用resolvePages函数，并传入变量process.env.page，得到打包入口对象为：{ page1 }，由于只有一个打包入口，因此vue-cli会调用webpack的打包服务，对该页面进行单独构建。
有人可能会问，难道只有打包时才能指定mode吗？其实不是的，serve命令也有mode参数。根据以上过程，你也可以单独启动某一个页面，此时你只需要定义下面这样的脚本：
{ ... "scripts": { "serve-page1": "vue-cli-service serve --mode page1" } }
与打包过程没有什么差别，这里就不再赘述了。
需要注意的是，public文件夹下的资源是静态资源，无论使用任何打包模式，它们都会被直接拷贝到dist文件夹下。
三、打包模式的应用
打包模式的应用不仅在于单页打包，我们举一个更常见的例子：假设我们的代码打包后可能被派发到多个项目上，而这些项目之间却存在一些细小的差别（比如某个表格的样式不同）。如果我们为每个项目都单独创建一份代码，那么代码库将变得极难维护。这时候，打包模式就可以派上用场了。
我们可以为这些项目分别创建单独的打包命令，如：
{ "scripts": { "build-project1": "vue-cli-service build --mode project1", "build-project2": "vue-cli-service build --mode project2", } }
然后在根目录下分别为每个打包模式定义一个环境文件：.env.project1，.env.project2。我们在这里分别定义一组全局变量：
.env.project1
VUE_APP_PROJECT = 'project1'
.env.project2
VUE_APP_PROJECT = 'project2'
这里需要强调的是，如果需要在src路径下的代码中引用env中的某个变量，那么这个变量必须以VUE_APP_开头，否则结果都会是undefined（在src之外的代码中没有这个限制，如上面我们在vue.config.js中引用的变量就没有遵循这个约束，当然你可以更规范地对所有自定义变量添加这个前缀，以防止出错）。
现在，当执行npm run build-project1时，process.env.VUE_APP_PROJECT的值就是project1，我们可以在代码中根据这个值来区分不同的项目。比如在某个组件中，我们需要对项目1添加一些额外的逻辑：
methods: { doSomething(){ if(process.env.VUE_APP_PROJECT === 'project1'){ // 对project1项目添加额外的逻辑 ... } } }
当你运行npm run build-project1打包命令时，if语句的内容就会生效，反之，在其他模式下，它不会生效。同样的，你也可以配置项目1专属的启动命令：
"serve-project1": "vue-cli-service serve --mode project1"
你可以运行npm run serve-project1来启用project1环境。
总结
通过学习在多页应用中打包单个页面，我们学会了如何自定义打包模式，这应该是本文最重要的知识点。将打包模式推广，我们学会了如何在一份代码中添加多个项目的逻辑，这使得我们维护多个项目分支的成本大大降低。打包模式的用途可能还远不止这些，希望读者理解它，并熟练运用。
到此这篇关于多页vue应用的单页面打包方法(内含打包模式的应用)的文章就介绍到这了,更多相关多页vue应用的单页面打包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: