vue 打包多页面应用解决方案

传统的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