pyscript 无法加载本地 python 模块常因路径配置错误或缺少本地服务器导致；本文详解正确配置 `py-config` 的 `fetch` 选项、启用本地 http 服务及路径书写规范，助你可靠导入自定义模块。
在 PyScript 中从本地文件导入模块（如 BookOperations.py）时出现 404 (File not found) 错误，根本原因通常有两个：一是浏览器直接双击打开 HTML 文件（file:// 协议），导致跨域限制和静态资源无法被 PyScript 的 Fetch API 正确读取；二是旧版 py-env 中的 paths 配置已被弃用，新版本需使用标准化的 py-config + fetch 语法。
✅ 第一步：必须使用本地 HTTP 服务器
浏览器禁止 file:// 协议下发起跨文件 fetch 请求。请勿双击 HTML 打开，而应启动一个本地服务器：
- ✅ 推荐（VS Code 用户）：安装 Live Server 插件，右键 HTML 文件 → “Open with Live Server”。
- ✅ Python 内置服务器（任意平台）：
# 在项目根目录（含 index.html 的同级目录）执行： python -m http.server 8000
然后访问 http://localhost:8000/index.html。
⚠️ 若未启用服务器，无论路径如何修正，均会触发 404 —— 这是浏览器安全策略，非 PyScript 缺陷。
✅ 第二步：升级并正确配置 py-config（替代已废弃的 py-env）
PyScript 自 2022.12.1 起已移除 py-env 中的 paths，改用 <py-config> 标签配合 fetch 字段，支持更灵活的路径映射与别名：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/releases/2024.8.1/pyscript.css" />
<script defer src="https://pyscript.net/releases/2024.8.1/pyscript.js"></script>
<title>Book App</title>
<!-- ✅ 使用 py-config + fetch（注意：路径为相对于服务器根目录的 URL 路径） -->
<py-config>
{
"packages": [],
"fetch": [
{
"from": "./app/db_operations/BookOperations.py",
"to": "./BookOperations.py"
}
]
}
</py-config>
</head>
<body>
<py-script>
# ✅ 现在可直接按模块名导入（无需路径前缀）
from BookOperations import get_books_count
print("Import successful! Count:", get_books_count())
</py-script>
</body>
</html>? 关键说明：
- from 字段：必须是可通过 HTTP 访问的相对 URL 路径（如 ./app/db_operations/BookOperations.py），对应你项目中真实的文件位置（参考你的截图结构）；
- to 字段：指定该文件在 PyScript 虚拟文件系统中的目标路径（通常设为同名 .py 文件即可），导入时使用 to 的文件名（不含路径）；
- 所有路径均以 ./ 开头，表示相对于当前 HTML 所在目录（即服务器根目录）；
- ❌ 不要写 ../（上级目录在 HTTP 服务中可能不可达）、❌ 不要写 app.db_operations.BookOperations（这不是 Python 包导入，而是文件 fetch 映射）。
✅ 第三步：验证文件可访问性
在浏览器中直接访问 http://localhost:8000/app/db_operations/BookOperations.py —— 若能正常显示 Python 源码，则路径配置正确；若 404，请检查文件实际位置是否与 from 值完全一致（区分大小写、.py 后缀、无隐藏字符）。
? 额外建议：
- 使用最新稳定版 PyScript（如 2024.8.1），链接见上方示例；
- 如需多模块，可在 fetch 数组中添加多个对象；
- 若模块依赖其他 .py 文件，请一并列入 fetch 列表（PyScript 不自动解析 import 依赖）；
- 开发时开启浏览器控制台（F12 → Console），PyScript 会输出清晰的 fetch 错误详情（如 CORS、MIME 类型等）。
遵循以上三步，即可彻底解决 Loading from file failed with error 404 问题，实现本地模块的可靠导入与复用。
