如何让Vite开发服务器在BASE URL中保留完整源地址？

核心配置方案 #

无需依赖<base>标签和Django重定向，直接通过Vite配置强制让资源路径与HMR连接都指向Vite服务器的完整地址：

1. 修改vite.config.js，配置server.origin与hmr.clientPort：

export default defineConfig({
  base: '/',
  server: {
    origin: 'http://localhost:5173', // 指定Vite服务器的完整地址，生成资源时自动带上
    hmr: {
      clientPort: 5173, // 强制HMR客户端使用Vite端口，避免适配Django端口
    },
  },
  // 其他Vue/SSR相关配置...
})

2. 移除index.html中的<base>标签，同时删除Django中针对/static/@vite/client的重定向规则。

方案原理 #

• server.origin会让Vite生成所有资源URL时自动拼接指定的完整域名+端口，浏览器会直接向Vite服务器请求资源，不会解析为相对于Django服务器的路径。
• hmr.clientPort强制HMR客户端固定连接Vite的端口，避免页面从Django（8000端口）加载时，Vite客户端自动使用8000端口发起额外的HMR连接。

临时方案导致重复HMR连接的原因 #

<base>标签让多数资源从localhost:5173加载，但/static/@vite/client通过Django重定向后，浏览器会从localhost:5173加载该脚本；同时页面本身从localhost:8000加载，Vite客户端会分别从两个源初始化HMR连接，因此出现重复的连接日志。

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