Vue3多页面应用配置异常求助：页面始终显示主页面

问题排查与修复步骤 #

1. 配置文件路径错误
   你的vite.config.js中配置的inquiry页面并不存在，实际对应的是about页面，需修正rollupOptions.input配置：

   build: {
       rollupOptions: {
           input: {
               main: resolve(__dirname, 'index.html'), // 主页面入口
               about: resolve(__dirname, 'src/pages/about/index.html') // 修正为about页面的正确路径
           }
       }
   }
   

2. 混淆多页面（MPA）与单页应用（SPA）概念
   你提到“无法使用SPA”，但当前配置的是多页面应用：

   • 多页面应用是多个独立HTML入口，每个页面对应单独的Vue实例，页面切换依赖浏览器整页刷新，无法使用Vue Router的SPA无刷新路由模式。
   • 若要实现SPA，无需配置多页面入口，直接做以下调整：
     • 删除src/pages/about/index.html，仅保留根目录的index.html
     • 安装vue-router，将About.vue设为路由组件，在App.vue中通过<router-view>渲染页面

3. 页面访问路径问题
   多页面配置完成后：

   • 开发环境下，about页面的访问路径为http://localhost:5173/src/pages/about/index.html
   • 生产构建后，可通过dist目录下的about.html（或对应路径）访问。若想优化路径友好度，可在vite配置中自定义输出文件名：

     build: {
         rollupOptions: {
             input: {
                 main: resolve(__dirname, 'index.html'),
                 about: resolve(__dirname, 'src/pages/about/index.html')
             },
             output: {
                 entryFileNames: chunkInfo => chunkInfo.name === 'about' ? 'about.js' : 'assets/[name].js'
             }
         }
     }
     

4. 主入口位置规范
   你给出的文件夹结构显示index.html在public目录下，但Vite默认将public作为静态资源目录，更规范的做法是把主入口index.html放在项目根目录，public仅存放favicon.ico这类静态资源。若坚持放在public，需修正主入口路径为resolve(__dirname, 'public/index.html')。

总结 #

• 做多页面应用：修正vite配置路径，用普通<a>标签跳转到对应HTML路径（如<a href="/src/pages/about/index.html">About</a>）。
• 做单页应用（SPA）：放弃多页面配置，改用Vue Router管理路由。

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