如何配置Snowpack使dev与build命令同时适配src与build目录结构

嘿，我刚好碰到过类似的Snowpack配置坑，给你一步步梳理解决方案：

问题根源 #

你当前的mount: {"src": "/"}配置在build时没问题，但dev模式下出错，核心原因是代码中可能硬编码了指向build目录的绝对路径（比如/build/_snowpack/pkg/...）。dev模式下Snowpack还没生成build目录，而且它会把src挂载到服务器根路径，导致请求/build/xxx时，Snowpack会去src/build目录找资源——但这个目录根本不存在，所以触发404。

解决方案 #

1. 修正代码中的资源引用路径 #

把所有硬编码的/build/xxx路径改成相对路径，比如：

• 错误写法：<script src="/build/_snowpack/pkg/@tensorflow/tfjs.js"></script>
• 正确写法：<script src="./_snowpack/pkg/@tensorflow/tfjs.js"></script>

更推荐的方式是用ES模块导入依赖，比如在JS文件里写：

import * as tf from '@tensorflow/tfjs';

Snowpack会自动处理依赖的打包和路径映射，完全不用手动写pkg路径，从根源避免路径错误。

2. 优化Snowpack配置（规范且清晰） #

调整配置文件，明确区分dev和build的行为，同时保留src和build的目录结构：

// Snowpack Configuration File
module.exports = {
  // 将src目录挂载到服务器根路径，dev和build模式都生效
  mount: {
    "src": "/",
  },
  // 指定build输出到build目录（默认就是build，明确写出更清晰）
  buildOptions: {
    out: "build",
  },
  // dev服务器基础配置，按需修改端口
  devOptions: {
    port: 8080,
  },
};

3. 正确访问项目 #

• 执行snowpack dev后，直接访问 http://localhost:8080/index.html（不要带build路径），Snowpack会从src目录加载文件，自动处理依赖。
• 执行snowpack build后，用静态服务器指向项目根目录，访问 http://localhost/myproject/build/index.html 即可，此时所有相对路径都会正确指向build目录下的资源。

这样调整后，dev和build命令就能同时正常工作，还能保持src存源码、build存构建产物的整洁结构~

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