Vue多页面场景使用疑问：布局切换与挂载目标设置

核心前提 #

Vue CLI 创建的是单页应用（SPA），所有动态内容都是通过 Vue 渲染到 index.html 里的 #app 容器中，完全不需要跳转其他 HTML 文件——跳转后当前 Vue 实例会直接失效，因为新页面没有 Vue 的初始化逻辑。

1. 彻底清空原有布局，从零开始 #

直接修改两个核心文件即可：

• public/index.html：保留最基础的 HTML 结构和 #app 挂载容器，删掉所有默认冗余内容

  <!DOCTYPE html>
  <html lang="zh-CN">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <title>你的自定义标题</title>
    </head>
    <body>
      <!-- 仅保留这个挂载容器，其余全部删除 -->
      <div id="app"></div>
    </body>
  </html>
  

• src/App.vue：清空默认模板、脚本和样式，完全自定义你的布局

  <template>
    <div class="custom-layout">
      <header>自定义头部</header>
      <main>核心内容区域</main>
      <footer>自定义底部</footer>
    </div>
  </template>
  
  <script>
  export default {
    name: 'App'
  }
  </script>
  
  <style scoped>
  .custom-layout {
    width: 100%;
    min-height: 100vh;
    /* 你的自定义样式 */
  }
  </style>
  

2. 能否用 index.html 以外的文件作为默认入口？ #

可以，但其实没必要（单页应用下直接改 index.html 更简单）。如果一定要换，需修改 Vue CLI 配置：

1. 在项目根目录新建/修改 vue.config.js
2. 指定自定义的入口 HTML 文件（比如 public/my-entry.html）：

   module.exports = {
     pages: {
       index: {
         entry: 'src/main.js',
         template: 'public/my-entry.html', // 替换为你的自定义入口HTML路径
         filename: 'index.html' // 打包后仍生成index.html，不影响部署
       }
     }
   }
   

⚠️ 注意：不管用哪个 HTML 文件，里面必须包含 id="app" 的元素——main.js 里的 createApp(App).mount('#app') 是挂载到这个选择器上的，它不是只能在 index.html 生效，只要当前页面存在该 ID 的元素，Vue 就能正常挂载。

3. 为什么跳转其他 HTML 页面 Vue 会失效？ #

每个 HTML 页面是独立的，新页面没有引入 Vue 的打包脚本（比如 app.js），也没有执行 Vue 实例的初始化和挂载逻辑，自然无法正常工作。如果需要多页面结构，建议用 Vue CLI 的多页面配置，而非手动跳转 HTML 文件。

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