如何使用Vue实现两个HTML页面的打包构建？

问题原因 #

你当前项目默认使用单页应用构建配置，构建工具只会将打包后的JS、CSS资源自动注入到public/index.html中，public/blog/some-page.html未被纳入构建处理流程，因此不会更新也不会加载对应的Vue组件。同时你将两个页面的Vue实例写在同一个入口文件中，还会导致单个页面加载时找不到另一个挂载节点的控制台报错。

解决方案（Vue CLI 环境） #

1. 拆分独立入口文件 #

将原src/main.js拆分为两个页面的独立入口，避免实例挂载冲突：

• 新增src/main.index.js作为首页入口：

import Vue from 'vue';
import Index from './Index.vue';
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false;

new Vue({
  vuetify,
  render: (h) => h(Index),
}).$mount('#app');

• 新增src/main.blog.js作为博客页入口：

import Vue from 'vue';
import Blog from './Blog.vue';
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false;

new Vue({
  vuetify,
  render: (h) => h(Blog),
}).$mount('#blog');

原src/main.js可删除。

2. 配置多页面构建参数 #

在项目根目录新建/修改vue.config.js，通过pages字段声明两个页面的构建规则：

module.exports = {
  pages: {
    // 首页配置
    index: {
      entry: 'src/main.index.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: '首页'
    },
    // 博客页配置，key对应输出路径
    'blog/some-page': {
      entry: 'src/main.blog.js',
      template: 'public/blog/some-page.html',
      filename: 'blog/some-page.html',
      title: '博客页'
    }
  }
}

3. 重新打包验证 #

执行npm run build命令重新打包，此时dist目录下会同时生成index.html和blog/some-page.html，两个文件都会自动注入对应的构建资源，部署到服务器后即可正常访问。

如果你使用的是Vite构建工具，逻辑类似，只需在vite.config.js中配置build.rollupOptions.input指定两个HTML文件的路径作为多入口即可。

内容的提问来源于stack exchange，提问作者Richard