如何为注入静态网站的Vite+Svelte组件配置热模块重载（HMR）？

你的现有设置已经为生产环境做好了文件名稳定的准备，但要在开发阶段启用HMR，我们需要调整Vite的开发服务器配置——毕竟HMR依赖Vite的实时文件监听和WebSocket连接，而不是静态build后的文件。下面是一步步的优化方案：

1. 调整Vite配置以支持外部网站的HMR连接 #

首先修改你的vite.config.ts，添加开发服务器的跨域和HMR配置，确保外部建站工具的页面能正常连接到Vite的开发服务器并接收更新：

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [svelte()],
  // 开发服务器核心配置：支持HMR和跨域
  server: {
    cors: true, // 允许跨域请求，解决外部网站加载Vite资源的跨域问题
    port: 5173, // 固定端口，方便你在建站工具里写固定URL
    host: '0.0.0.0', // 允许外部设备/网站访问（比如你的建站工具页面可能在不同域名下）
    hmr: {
      clientPort: 5173, // 确保HMR的WebSocket连接使用指定端口，避免跨端口被拦截
      protocol: 'ws', // 本地开发用ws协议即可，避免wss的安全校验问题
    },
    origin: 'http://localhost:5173', // 让Vite生成正确的资源引用URL
  },
  // 保留你之前的生产构建配置
  build: {
    manifest: true,
    rollupOptions: {
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`
      }
    }
  }
})

2. 替换建站工具中的注入代码 #

开发阶段不要使用build后的dist文件，直接指向Vite开发服务器的入口文件——Vite会自动注入HMR客户端、处理样式热更新，所以你不需要手动引入CSS：

<!-- 替换之前的dist脚本，指向Vite dev server的入口 -->
<script type="module" crossorigin src="http://localhost:5173/src/main.ts"></script>

为什么不需要CSS标签？因为Vite开发服务器会自动将Svelte组件的样式通过JS动态注入，并且支持样式的热更新，修改组件样式会实时同步到页面，无需刷新。

3. 验证HMR功能 #

1. 启动Vite开发服务器：npm run dev（或yarn dev/pnpm dev）
2. 打开你的建站工具页面，确认组件正常挂载
3. 修改你的Svelte组件（比如App.svelte），保存后看页面是否自动更新组件内容/样式——不需要刷新整个页面！

关键注意事项 #

• 开发vs生产分离：开发阶段用vite dev和上面的dev server URL，生产阶段依然用你之前的build命令，把dist文件上传到CDN后注入到网站
• 状态保留：默认情况下，Svelte的HMR会保留组件的状态（比如计数器的数值），如果需要重置状态，可以在组件里添加// @hmr:reset注释
• HMR连接问题排查：如果控制台出现WebSocket连接失败的错误，检查：
  • Vite配置的port和clientPort是否一致
  • 浏览器是否禁用了WebSocket（比如某些广告拦截插件）
  • 本地防火墙是否阻止了端口连接
• 多组件挂载：如果需要注入多个不同的Svelte组件，可以在main.ts里扩展挂载逻辑，比如根据不同的DOM ID挂载对应的组件，HMR对每个组件都有效

这样你的开发流程就顺畅了：修改Svelte组件→实时看到更新，不用频繁刷新页面，生产环境依然保持稳定的资源URL。

备注：内容来源于stack exchange，提问作者learyjk