Vue/Vite多页应用按官方配置开发环境访问子路径返回404排查

问题核心原因 #

Vite 2.x 默认多页自动识别规则为扫描项目根目录下所有层级的.html文件作为入口，你当前的两个入口文件都放在/src/子目录下，访问路径和文件实际存放路径不匹配，也没有手动配置入口映射，因此会返回404。官方文档提到的无需额外配置的场景，指的是入口文件夹直接放在项目根目录下，而非嵌套在src目录中。

修复方案 #

方案一：保留现有目录结构，添加配置 #

在项目根目录的vite.config.js中添加如下配置，即可实现开发环境直接通过/portal、/admin访问，同时构建时生成独立的输出包：

import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
import pugPlugin from 'vite-plugin-pug'
import path from 'path'

export default defineConfig({
  plugins: [
    createVuePlugin(),
    pugPlugin()
  ],
  // 配置多入口，保证构建阶段生成独立包
  build: {
    rollupOptions: {
      input: {
        portal: path.resolve(__dirname, 'src/portal/index.html'),
        admin: path.resolve(__dirname, 'src/admin/index.html')
      }
    }
  },
  // 开发服务路径重写，适配现有目录结构
  server: {
    rewrite: [
      { from: /^\/portal/, to: '/src/portal/index.html' },
      { from: /^\/admin/, to: '/src/admin/index.html' }
    ]
  }
})

配置后还要检查两个入口的index.html内的脚本引用路径是否正确，比如admin的index.html需要正确引入同目录下的app.js：

<script type="module" src="./app.js"></script>

方案二：调整目录结构适配默认规则 #

如果不想额外添加配置，可以把portal、admin两个入口文件夹从/src/下移动到项目根目录，调整后的目录结构如下：

/
/portal/
/portal/index.html
/portal/app.vue
/admin/
/admin/index.html
/admin/app.vue
/admin/app.js
/src/ （存放公共组件、样式、api、auth等公共支撑代码）

该结构完全符合Vite默认的多页识别规则，不需要修改vite.config.js即可正常访问。

配套注意事项 #

• 两个入口的vue-router配置要分别设置base路径，portal对应/portal/，admin对应/admin/，避免路由跳转冲突
• 公共代码统一放在/src/目录下，两个入口直接通过路径引入即可实现复用
• 构建后dist目录会生成对应入口的独立文件，部署时按路径挂载即可

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