Vite开发服务器模式下是否支持多HTML入口？

当然可以实现。你之前用的方案仅针对构建阶段，开发服务器需要结合Vite的原生特性来配置：

核心配置与访问方式 #

1. 配置vite.config.js
   先在配置文件中声明多入口（同时兼容构建和开发阶段），并确保开发服务器能访问到入口文件：

   import { defineConfig } from 'vite'
   
   export default defineConfig({
     build: {
       rollupOptions: {
         input: {
           main: './src/pages/main.html',
           admin: './src/pages/admin.html'
         }
       }
     },
     server: {
       fs: {
         // 允许访问src目录下的文件，若入口在其他路径可自行调整
         allow: ['./src']
       }
     }
   })
   

2. 直接访问入口HTML
   启动vite --host后，通过以下路径直接访问各入口：

   • 主页面：http://{你的主机IP}:5173/src/pages/main.html
   • 后台页面：http://{你的主机IP}:5173/src/pages/admin.html

优化访问路径（可选） #

如果觉得原生路径太长，可通过中间件配置重定向，简化访问地址：

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: './src/pages/main.html',
        admin: './src/pages/admin.html'
      }
    }
  },
  server: {
    async configureServer(server) {
      server.middlewares.use((req, res, next) => {
        // 根路径跳转主页面
        if (req.url === '/') {
          res.writeHead(302, { Location: '/src/pages/main.html' })
          res.end()
          return
        }
        // /admin 跳转后台页面
        if (req.url === '/admin') {
          res.writeHead(302, { Location: '/src/pages/admin.html' })
          res.end()
          return
        }
        next()
      })
    }
  }
})

配置后直接访问http://{你的主机IP}:5173/和http://{你的主机IP}:5173/admin即可对应到两个入口。

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