如何在ViteJS开发环境中配置多子域名访问解析？

第一步：配置本地 hosts 解析 #

首先需要将三个子域名指向本地回环地址，修改系统 hosts 文件（Windows 路径为C:\Windows\System32\drivers\etc\hosts，macOS/Linux 路径为/etc/hosts），添加如下内容：

127.0.0.1 admin.myapp.dev
127.0.0.1 buyers.myapp.dev
127.0.0.1 sellers.myapp.dev

修改完成后刷新系统 DNS 缓存即可生效。 #

方案一：单 Vite 实例 + 路由规则匹配（推荐，无需多开服务） #

适合三个子域名属于同一个项目、仅入口/路由区分的场景，仅需启动一个 Vite 服务即可完成所有子域名的访问。
参考vite.config.js配置：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    port: 80, // 用80端口可省略地址栏端口号，启动时需要管理员/root权限
    host: '0.0.0.0',
    // 如需HTTPS访问，先通过mkcert生成*.myapp.dev泛域名证书，再打开下方配置
    // https: {
    //   cert: './ssl/myapp.dev.pem',
    //   key: './ssl/myapp.dev-key.pem'
    // },
    proxy: {
      // 按子域名匹配转发到对应入口
      '^http://admin.myapp.dev': {
        target: 'http://localhost:5173/admin',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/admin/, '')
      },
      '^http://buyers.myapp.dev': {
        target: 'http://localhost:5173/buyers',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/buyers/, '')
      },
      '^http://sellers.myapp.dev': {
        target: 'http://localhost:5173/sellers',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/sellers/, '')
      }
    }
  },
  // 多入口项目补充build配置，适配生产打包
  build: {
    rollupOptions: {
      input: {
        admin: './src/admin/index.html',
        buyers: './src/buyers/index.html',
        sellers: './src/sellers/index.html',
      }
    }
  }
})

方案二：多 Vite 实例绑定不同 hostname（适合三个完全独立的项目） #

如果三个子域名对应三个独立的 Vite 项目，不需要共用代码，可分别给每个项目配置独立 hostname，所有项目共用同一个端口即可，不需要配置不同端口：

• admin 项目的vite.config.js：

export default defineConfig({
  server: {
    host: 'admin.myapp.dev',
    port: 80
  }
})

• buyers 项目的vite.config.js：

export default defineConfig({
  server: {
    host: 'buyers.myapp.dev',
    port: 80
  }
})

• sellers 项目参考上述规则配置即可，分别启动三个项目的 dev 服务，Vite 会自动根据请求的 hostname 分发到对应服务。

常见问题排查 #

• 若启动时提示端口占用，先检查对应端口是否被Nginx、IIS、Apache等其他服务占用，停掉占用服务或更换端口即可，更换端口后访问地址需要带上端口号，比如admin.myapp.dev:8080
• HTTPS 场景下需要确保证书为*.myapp.dev的泛域名证书，否则浏览器会弹出安全风险提示
• 修改 hosts 后不生效可执行对应命令刷新DNS：Windows执行ipconfig /flushdns，macOS执行sudo dscacheutil -flushcache; sudo killall -HUP mDNSResponder

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