Snowpack执行build --watch时内部模块导入路径异常问题

问题根因 #

Snowpack 执行build --watch命令时默认适配自带开发服务器的运行场景，会生成站点根路径开头的绝对导入路径。由于你使用Flask作为后端服务，静态资源路由、页面访问路径与Snowpack默认的根路径规则不匹配，因此绝对路径无法命中对应资源；无--watch参数的常规build默认开启相对路径适配，因此可正常运行。

修复步骤 #

• 调整Snowpack配置文件snowpack.config.js（如果项目根目录下没有该文件，手动新建即可），开启相对路径生成规则，配置参考如下：

module.exports = {
  mount: {
    // 按你的实际源码目录调整，key为本地源码目录，value为构建后输出的路径根
    src: '/',
    public: '/'
  },
  buildOptions: {
    // 按你的实际输出路径调整，建议直接输出到Flask项目的static对应子目录
    out: './dist',
    // 核心配置：开启相对路径生成，所有导入路径会按文件相对位置自动生成
    relativePaths: true,
    // 可选：固定资源路径前缀，如果你所有Snowpack构建产物都部署在/static/snowpack路径下，可配置为'/static/snowpack'
    // assetUrlPrefix: ''
  }
}

• 清除Snowpack本地缓存，避免旧构建产物影响，执行命令：npx snowpack clean
• 重新运行npx snowpack build --watch，此时生成的跨模块导入路径会自动适配文件相对位置，无需手动修改。

机制说明 #

Snowpack的模块路径生成逻辑受运行模式影响：开发模式/watch模式默认假设所有产物部署在站点根目录，因此生成/_snowpack/开头的绝对路径；生产构建模式默认启用相对路径适配，会根据每个文件的目录层级计算资源导入路径。开启relativePaths: true后会强制所有模式都使用相对路径生成规则，适配非根目录部署、外部后端服务的场景。

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