开发 Vue 多页面应用

大家都知道，Vue CLI 是一个强大的脚手架工具，通常情况下，它使用 webpack 来开发部署单页面应用（SPA）。单页面应用是很好用，也能满足很多场景。然而 SPA 也不是万能的。比如你的团队需要同时开发多个项目，前端会公用用到一些自行开发的业务组件，但这些组件并不太成熟，需要不时修复一些 bug。环境限制你无法将这些组件的最新版同步更新到各项目。此时一种比较好的解决方案就是将各项目的代码和组件库代码放到一个工程里。本质上这就是开发多页面应用了。如何使用 Vue CLI 开发开发多页面应用呢？

为了方便讲述，我们使用 Vue CLI 时选择 webpack 项目模板，运行完成后会生成一个单页面应用，我们在 src 下新建 app1 目录，并把项目根路径下和 index.html 文件和 src 的源码移到 app1 中。

复制 app1 目录并更名为app2，适当修改 HelloWorld.vue 中的代码让两个页面显示不同的内容。如下图所示。

我们的目标是在开发环境下能通过 localhost:8080/app1 和 localhost:8080/app2 访问两个应用。此时运行开发环境肯定会报错。默认下，入口文件 main.js 是直接放置 src 下，index.html 模板文件放置在根路径下，只要修改它们的路径就可以运行了。

第一步：设置多入口

打开webpack.base.conf.js，将单个入口改成多个单个入口

entry: {
  app: './src/main.js'
}

entry: {
  app1: 'src/app1/main.js',
  app2: 'src/app2/main.js'
}

详细讲解请参考 webpack 文档：入口起点(entry points)。这里我们建立了两个入口 app1 和 app2，对应两个独立分离的依赖。此依赖会映射项目所需的每个模块，并生成一个或多个 bundle 并注入到 index.html 模板文件中。

第二步：修改模板配置

接下来我们修改开发环境的 index.html 模板文件位置。打开webpack.dev.conf.js。

webpack是使用来管理输出的。其中 filename 对应要写入的 HTML 文件，也就是我们最终在开发环境下要访问的 html 文件。我们在此处修改为app1/index.html。

template对应 webpack 中模板文件的相对路径或绝对路径。默认情况下,如果存在,它将使用 index.html。我们在此处修改为 src/app1/index.html。

有关详细信息,请参阅文档。

本实例中，我们有两个入口，因此还要对 app2 进行 HtmlWebpackPlugin 插件配置，全部 HtmlWebpackPlugin 插件配置如下:

new HtmlWebpackPlugin({
  filename: './app1.html',
  template: './src/app1/index.html',
  inject: true
}),
new HtmlWebpackPlugin({
  filename: './app2.html',
  template: './src/app2/index.html',
  inject: true
})

npm start运行一下开发环境，我们看到可以访问localhost:8080/app1.html和localhost:8080/app2.html了，不过他们显示的都是 app1.html 的内容。为什么会这样呢，浏览器下查看页面源码，可以发现两个页面都注入了 app1.js 和app1.js。由于 app1.js 放在 app1.js 后面，如果刚好覆盖，则显示的都是 app1.html 的内容。

第三步：修改 HtmlWebpackPlugin 插件

如果你有多个 webpack 入口点， HtmlWebpackPlugin 插件都会在生成的 HTML 文件中将他们注入到 script 标签内。如何只在页面中插入相应的打包 JavaScript 文件呢？可以通过显示设置它们的 chunk 仅为应用添加特定块，将它们的依赖导向（graph）到一个块。

完整的 HtmlWebpackPlugin 插件配置如下：

new HtmlWebpackPlugin({
  filename: './app1.html',
  template: 'src/app1/index.html',
  inject: true,
  chunks: ['app1']
}),
new HtmlWebpackPlugin({
  filename: './app2.html',
  template: './src/app2/index.html',
  inject: true,
  chunks: ['app2']
})