传统的vue都是spa应用，也就是俗称的单页面应用。但是有些情况下我们可能需要将多个单页面应用整合在一个项目里，这个时候就需要将项目打包成多页面应用了。
具体操作往下看
首先创建一个符合需求的项目，文件目录结构如下
image.png
可以看到，他和传统的项目不同的是，根目录下不再有public文件夹，自然也就没有了index.html。并且src目录下的main.js入口文件也没有了。
取而代之的是pages目录下，多了几个子项目，每个子项目的目录结构都是一个完整的单页面应用的结构，他们有自己的index.html 并且也有自己的入口文件。
接下来需要在vue.config.js里做一些调整
正常情况下，通过webpack配置多页面应用的话我们需要指定多个entry 并且指定多个output。但是 vue.config.js提供了一个叫做pages的配置项给我们，可以做到很便捷的配置这些东西。
要弄明白为什么要配置多入口就得先知道webpack的工作原理，他到底帮我们做了什么。其实webpack简单点理解就是指定入口js，也就是告诉webpack从哪个js开始起手打包，然后指定出口js，也就是最终输出什么js。然后我们还需要借助HtmlWebpackPlugin这个插件帮我们生成模板html文件并且引入我们打包出来的js文件以及css文件。这样一个单页面应用就打包完成了。
而vue.config.js提供的pages配置项应该就是已经整合了entry output以及HtmlWebpackPlugin了。
首先我们一个传统的单页面应用，其实就是一个html文件，然后引入各种js。vue通过自己的路由来替换index.html文件里的模板。这就是一个单页面应用。理解了这个，就不难理解配置多页面应用的过程了。既然一个html文件就是一个单页面应用，那多页面应用无非就是多个html文件嘛。
每个html文件负责自己项目里的东西。我们要做的就是将入口和出口都指定多个就行了。这样打包出来的就是多个html文件，那我们在访问的时候就和在访问真实的服务器上的资源一样，根据具体的文件名访问到对应的项目了。
下面先来看看pages的具体配置都有哪些
image.png
image.png
再来看看我们的配置
pages:{
index:{
entry:'src/pages/pages1/main.ts',
template:'src/pages/pages1/public/pages1.html',
title:'pages1'
},
pages2:{
entry:'src/pages/pages2/main.ts',
template:'src/pages/pages2/public/pages2.html',
title:'pages1'
},
pages3:{
entry:'src/pages/pages3/main.ts',
template:'src/pages/pages3/public/pages3.html',
title:'pages1'
},
},
这样配好之后我们运行项目就能根据pages对象里的key值访问到对应的子项目了
比如http://localhost:8080/pages1/ 访问到的就是pages1项目。
上图中配置了一个index，目的是为了访问http://localhost:8080的时候不会空白页，会默认就指向index的模板。当然也可以在devserve的before属性里配置生成一个导航页来跳转目标子项目，这些都是非常自由的。
下面来讲一下在配置的过程中遇到的问题。
问题一：
刚开始配置的时候没有删除掉根目录下public文件夹，然后运行项目一直报错
Multiple chunks emit assets to the same filename。后面搜了很久都找不到合适的答案，这个报错的大概意思就是多个块将资源发射到同一文件名。这里多个块肯定说的就是我们在pages里配置的这几个子项目了。
image.png
估计就是因为output的输出filename没有使用占位符，导致每个都输出成index.html了，但是让我不明白的是为什么在pages里配置的这些子项目明明都指定了自己的模板，还会和public里的index.html扯上关系。
最后解决方案就是要么删除public文件夹，要么在pages里给每个对象指定filename。
但是为什么会出现这个问题，我猜测是构建过程中默认会去找public文件夹下的index.html,即使你配置了一个名为index的入口也无济于事。
或许使用configureWebpack去更改webpack 的配置应该就不会出现这个问题了把，但是那会需要多写很多步骤。
如果想要了解webpack打包多页面的可以看看这篇文章，写的很详细
https://juejin.cn/post/6844903545922158599
下面再调整一下pages，如果有很多个子项目的时候每个都需要这么去写会很麻烦，这里可以通过glob这个库来读取src目录下的文件，然后动态的生成pages的配置项
const { defineConfig } = require('@vue/cli-service')
const glob = require('glob')
function getEntry(){
let files = glob.sync('src/pages/**/public/*.html')
const map = {}
files.forEach(file=>{
const key = file.split('public/')[1].split('.')[0]
map[key] = {
entry:`src/pages/${key}/main.ts`,
template:file,
title:key,
filename:`${key}.html`
}
})
console.log(map)
return map
}
const pages = getEntry()
module.exports = defineConfig({
transpileDependencies: true,
pages
})
正则不太好，只能用点捞的方法去匹配内容了，但是大概步骤就是这样。
glob 是 webpack 安装时依赖的一个第三方模块，该模块允许你使用 * 等符号,
例如 lib/*.js 就是获取 lib 文件夹下的所有 js 后缀名的文件
*代表所有目录，代表所有名称
src/pages/*/public/.html的意思就是src下的pages下的所有目录下的public下的所有html文件的意思。
lQLPJxbRvpm7PvnNAeLNA-OwCE6VJlfUj-sDWLY07sD0AA_995_482.png
网友评论