如何在Vue路由应用中渲染旧HTML文件及内嵌Vue组件？

你的需求完全可行，当前代码主要存在重复挂载Vue实例、路由配置错误、HTML标签未注册这几个问题，下面分步骤帮你解决：

一、先修复基础错误 #

1. 清理index.html的重复代码 #

你的index.html里重复引入了main.js，还额外写了一遍Vue实例创建代码，这会导致冲突。修改后的index.html应该只保留核心挂载逻辑：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Whispering Leaves</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="./styles/contact.css">
    <link rel="stylesheet" href="./styles/styles.css">
</head>
<body>
    <div id="app"></div> <!-- 仅保留这一个Vue挂载容器 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"></script>
    <script type="module" src="./main.js"></script>
</body>
</html>

2. 修正路由配置错误 #

你的路由文件里导入的是ContactPage，但路由项里写的是component: Contact（未定义变量），修改路由文件index.js：

import { createRouter, createWebHistory } from 'vue-router';
import ContactPage from '../src/components/ContactPage.vue';

const routes = [
    // 其他无关路由
    { path: '/contact', component: ContactPage }, // 这里改成ContactPage
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

二、两种方案实现你的需求 #

方案1：将旧HTML内容整合到Vue组件（推荐，适配SPA路由） #

这是Vue单页应用的标准做法，把旧HTML里的内容和表单组件整合到ContactPage.vue中：

<template>
  <!-- 复制旧HTML文件里的所有内容（除了html/head/body标签） -->
  <div class="old-html-container">
    <h1>TEST HTML IS RENDERING</h1>
    <!-- 按照作业要求添加容器，直接使用Vue表单组件 -->
    <div id="vue-form-container">
      <ExampleComponent />
    </div>
  </div>
</template>

<script>
// 导入你的表单组件
import ExampleComponent from './ExampleComponent.vue';

export default {
  components: {
    ExampleComponent
  }
}
</script>

<style scoped>
/* 旧HTML里的样式可以移到这里，或者保留外部样式表 */
</style>

访问/contact时，路由会自动渲染这个组件，同时包含旧HTML内容和Vue表单组件，完美满足迁移需求。

方案2：保留旧HTML文件，在其中嵌入Vue组件 #

如果你需要完全保留原HTML文件结构，可通过iframe加载该HTML，并在HTML内部挂载Vue组件：

1. 创建独立的contact.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Contact Page</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../styles/contact.css">
    <link rel="stylesheet" href="../styles/styles.css">
</head>
<body>
    <!-- 旧HTML原有内容 -->
    <h1>TEST HTML IS RENDERING</h1>
    <!-- 作业要求的Vue组件容器 -->
    <div id="vue-form-container"></div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"></script>
    <!-- 挂载Vue组件（注意路径要和你的项目结构匹配） -->
    <script type="module">
      import { createApp } from 'vue';
      import ExampleComponent from '../src/components/ExampleComponent.vue';
      const app = createApp(ExampleComponent);
      app.mount('#vue-form-container');
    </script>
</body>
</html>

2. 创建Vue组件加载这个HTML

新建HtmlLoader.vue：

<template>
  <iframe :src="'/contact.html'" frameborder="0" width="100%" height="100vh"></iframe>
</template>

<script>
export default {
  // 无需额外逻辑，直接加载HTML文件
}
</script>

3. 更新路由配置

在index.js里添加新路由：

import HtmlLoader from '../src/components/HtmlLoader.vue';

const routes = [
    // 其他路由
    { path: '/contact', component: HtmlLoader },
];

这样访问/contact时，就会通过iframe加载你的旧HTML文件，同时其中的Vue表单组件也会正常渲染。

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