如何用Vite搭建多页面应用？访问/login路径未加载对应页面

要解决访问/login时始终加载根目录index.html的问题，需要调整Vite配置并确保路由映射正确，具体步骤如下：

1. 修正vite.config.js配置 #

配置需要同时处理打包入口和开发服务器路由映射，修改后的完整配置如下：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      // 明确配置多入口，确保打包时生成对应页面的资源包
      input: {
        main: './index.html',
        login: './login/index.html'
      }
    }
  },
  server: {
    // 添加路由重写规则，将/login路径映射到login目录下的index.html
    rewrites: [
      {
        from: /^\/login$/,
        to: '/login/index.html'
      }
    ]
  }
});

2. 确认子页面资源引用路径 #

检查login/index.html中对login.js的引用路径是否正确，需使用相对路径：

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

原理说明 #

• Vite开发服务器默认仅识别根目录的index.html作为入口，子目录页面需通过server.rewrites规则将请求路径映射到对应HTML文件。
• build.rollupOptions.input的配置是为了确保生产打包时，能正确生成多个页面的独立资源包。

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