本地HTTPS环境运行Svelte dev无法检测代码变更问题求助

架构老林

2026-9-26

问题根因

你当前配置存在两处核心问题导致热重载失效：

服务启动和代码监听逻辑拆分错误：dev命令仅负责监听源码变动编译打包，没有启动开发服务；start命令启动的sirv服务默认关闭了开发模式，没有内置热重载相关的推送、监听能力。
热重载依赖的livereload/sirv dev模式未适配HTTPS配置，导致热更新的ws连接被浏览器拦截，无法收到代码更新通知。

修复方案

1. 调整package.json脚本

保留生产环境启动命令即可，开发环境走rollup内置的服务启动逻辑，脚本配置参考：

"scripts": {
  "build": "rollup -c",
  "dev": "rollup -c -w",
  "start": "HOST=0.0.0.0 sirv public --no-clear --port 443 --http2 --cert cert.pem --key key.pem"
}

2. 修改rollup.config.js的开发插件配置

首先给sirv插件添加HTTPS相关参数并确认开启dev模式：

// 配置文件顶部如果没有引入fs模块需要补充
import fs from 'fs';
// 以下两个插件默认Svelte模板已内置，无需额外安装
import sirv from 'sirv';
import livereload from 'rollup-plugin-livereload';

export default {
  // 其他原有的rollup配置保持不变
  plugins: [
    // 其他原有插件（svelte、commonjs等）保持不变
    !production && sirv('public', {
      dev: true,
      host: '0.0.0.0',
      port: 443,
      http2: true,
      cert: 'cert.pem',
      key: 'key.pem',
      clear: false
    }),
    // 给livereload插件添加HTTPS配置，避免wss连接被拦截
    !production && livereload({
      watch: 'public',
      https: {
        key: fs.readFileSync('key.pem'),
        cert: fs.readFileSync('cert.pem')
      }
    })
  ]
}