Vue3+Vite多页面应用路由页面无法打开问题求助

你现在的核心问题是同时混合了Vue Router（SPA单页路由）和Vite MPA（多页面应用）两种完全不同的架构模式，导致路由跳转完全失效。简单来说：

• Vue Router是给单页应用（SPA）用的，所有页面共享一个HTML入口，通过前端路由切换组件；
• Vite的pages配置是给多页面应用（MPA）用的，每个页面有独立的HTML、JS入口，页面跳转靠浏览器的原生页面刷新，不需要Vue Router。

你之前只做过SPA，现在想做3页面切换，其实更适合继续用SPA架构（除非你明确需要每个页面完全独立，比如不同的域名/子域名、完全隔离的状态）。下面分两种方案给你解决：

方案一：转成标准SPA架构（推荐） #

这是最符合你之前开发习惯的方案，只需要调整项目结构和配置：

1. 清理Vite的MPA配置 #

打开vite.config.js，删除整个pages配置块，恢复成默认的SPA配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // 记得加上这个Vue插件

export default defineConfig({
  plugins: [vue()],
  // 保留你之前的其他配置（比如端口、别名等），但去掉pages配置
});

2. 调整项目结构 #

删除每个pages/xxx下的main.js和index.html，只保留Vue组件文件：

proj
+--public
+--src
   |--assets
   |--components
   |--pages  // 保留这个目录存放页面组件
      +--browse
         |--Browse.vue
      +--create
         |--CreateEntry.vue
   |--router
      |--index.js
   |--stores
   |--views
      |--App.vue
      |--main.js  // 这是唯一的应用入口
|--index.html  // 唯一的HTML模板
|--vite.config.js

3. 完善Vue Router配置 #

确保router/index.js里所有路由都正确导入组件：

import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue'; // 若HomeView是默认导出，不需要花括号

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/create',
      name: 'create',
      component: () => import('../pages/create/CreateEntry.vue') // 懒加载语法没问题
    },
    {
      path: '/browse',
      name: 'browse',
      component: () => import('../pages/browse/Browse.vue') // 补充browse路由
    }
  ]
});

export default router;

4. 修复App.vue的关键错误 #

• 必须添加<RouterView />：这是SPA渲染当前路由组件的核心容器，放在菜单下方即可避免内容叠加；
• 修复RouterLink的语法错误：你之前的标签未闭合，缺少>。

修改后的App.vue：

<script setup>
import { RouterLink, RouterView } from 'vue-router';
</script>

<template>
  <!-- 导航菜单 -->
  <ul class="menu">
    <RouterLink to="/"><li>Home</li></RouterLink>
    <RouterLink to="/create"><li>Create</li></RouterLink>
    <RouterLink to="/browse"><li>Browse</li></RouterLink>
  </ul>

  <!-- 路由组件渲染容器 -->
  <RouterView />
</template>

5. 确保主入口正确挂载 #

修改src/views/main.js（建议移到src/main.js更合理），注册路由并挂载App：

import { createApp } from 'vue';
import App from './App.vue';
import router from '../router/index.js';

const app = createApp(App);
app.use(router); // 注册路由插件
app.mount('#app');

6. 检查根目录index.html #

确保index.html里有<div id="app"></div>，这是Vue应用的挂载点。

方案二：如果坚持用MPA多页面应用 #

如果你确实需要每个页面完全独立（比如独立状态、资源隔离），那要彻底放弃Vue Router，改用原生页面跳转：

1. 修正Vite的pages配置语法错误 #

你的vite.config.js里pages配置有语法和路径错误，正确格式如下：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  pages: {
    index: {
      entry: "./src/views/main.js",
      template: "public/index.html",
      title: "Home",
      filename: "index.html",
      chunks: ['chunk-vendors', 'chunk-common', 'index'] // 修复引号缺失问题
    },
    create: {
      entry: "./src/pages/create/main.js",
      template: "./src/pages/create/index.html", // 路径要完整
      title: "Create",
      filename: "create.html", // 每个页面文件名要唯一，不能都叫index.html
      chunks: ['chunk-vendors', 'chunk-common', 'create']
    },
    browse: {
      entry: "./src/pages/browse/main.js",
      template: "./src/pages/browse/index.html",
      title: "Browse",
      filename: "browse.html",
      chunks: ['chunk-vendors', 'chunk-common', 'browse']
    }
  }
});

2. 替换RouterLink为普通a标签 #

MPA的页面跳转依赖浏览器刷新，所以把导航换成普通<a>标签（注意：MPA每个页面都要有自己的导航菜单，因为页面是独立应用）：

<template>
  <ul class="menu">
    <a href="/"><li>Home</li></a>
    <a href="/create.html"><li>Create</li></a>
    <a href="/browse.html"><li>Browse</li></a>
  </ul>
</template>

3. 修复每个页面的main.js错误 #

每个页面的main.js有两个语法错误：

• 组件导入路径要写相对路径；
• mount的参数要加引号。

以create页面为例：

import { createApp } from 'vue';
import CreateEntry from './CreateEntry.vue'; // 相对路径导入

createApp(CreateEntry).mount('#app'); // #app需加引号

4. 确保每个页面的index.html有挂载点 #

每个pages/xxx/index.html里必须包含<div id="app"></div>，否则Vue无法挂载组件。

最后检查要点 #

1. 配置修改后重启Vite开发服务器，否则新配置不生效；
2. 控制台无报错时，先检查组件路径、文件名的拼写是否正确；
3. SPA模式下内容叠加，确认<RouterView />是单独的容器，未与固定内容混排。

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