Vue 3 Vite多页面应用报错：未找到匹配路径的位置

• 确认项目构建配置的多页面规则是否缺失
  • 若使用Vite构建，需在vite.config.js中添加入口配置，指定每个页面的HTML路径：

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    
    export default defineConfig({
      plugins: [vue()],
      build: {
        rollupOptions: {
          input: {
            main: './index.html',
            // 替换为你实际的嵌套页面入口路径
            subpage: './src/pages/subpage/index.html'
          }
        }
      }
    })
    

  • 若使用Vue CLI构建，需在vue.config.js中配置pages字段，定义每个页面的入口和模板：

    module.exports = {
      pages: {
        index: {
          entry: 'src/main.js',
          template: 'public/index.html'
        },
        subpage: {
          entry: 'src/pages/subpage/main.js',
          template: 'public/subpage.html'
        }
      }
    }
    

• 检查嵌套页面的文件结构是否合规
  • 每个独立页面需具备完整的入口链：独立的main.js（负责挂载Vue实例）、对应的模板HTML文件，路径拼写要完全匹配配置中的定义，注意大小写、层级是否一致
• 验证访问路径是否正确
  • 开发环境下，多页面的访问路径应为http://localhost:端口号/页面入口文件名.html（Vite）或http://localhost:端口号/页面名称（Vue CLI），不要直接访问组件文件路径
• 若使用Vue Router，需确保每个页面有独立的路由实例
  • 多页面应用中不同页面的路由应相互隔离，避免共用同一个路由配置导致路径冲突

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