如何使用 Vue 为两个 HTML 页面构建文件？答案

【问题标题】：How to build files for two HTML pages using Vue?如何使用 Vue 为两个 HTML 页面构建文件？
【发布时间】：2021-05-21 15:14:49
【问题描述】：

现在，我有两个要构建的 HTML 文件。我的项目结构是这样的。

|- node_modules
|- public
|  |- blog
|  |  |- some-page.html
|  |- index.html
|- src (contains all the Vue components)
   |- Blog.Vue
   |- Index.Vue
   |- main.js

在我的some-page.html 中，我有一个div，ID 为blog，在我的index.html 文件中，我有一个div，ID 为app。然后，在我的main.js 中，我有这个代码。

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

Vue.config.productionTip = false;

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

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

当我构建项目时，some-page.html 根本没有更新。 index.html 页面运行良好。我怎样才能做到，所以当我构建项目时，some-page.html 也被注入了 Vue 组件？我想将构建的文件上传到我的服务器以进行托管，以进行我使用 Vue 的个人实验。

我在 Github 上发布了源代码：https://github.com/171112542/seo

【问题讨论】：

根据我使用 Vue 2 和 Vue CLI 的经验，我没有在 main.js 中看到两个 Vue 实例。我建议只使用一个，通常用于渲染 App.vue，其他 SFC 可以是 App.vue 的后代（子等）。将 some-page.html 转换为 SFC 的模板。
@Tim 我正在尝试制作两个不同的页面，而不是使用一个刷新其内容的页面。（非 SPA）
我建议按照文档和教程中描述和示例的方式使用 Vue，重新设计您的应用程序以适应该结构。显然取决于你。也许别人会做你想做的事。

标签： html vue.js vuejs2 vue-cli-4

【解决方案1】：

当您使用 Vue CLI 时，您可以使用 pages config 配置的“多页模式”

请注意，每个html 模板都应该有自己独立的main.js 入口点

【讨论】：