
本文介绍使用 pyscript 框架通过 `
在现代 Web 前端中直接运行 Python 代码,需借助 PyScript —— 一个基于 WebAssembly 的前端 Python 运行时框架。它允许你在 HTML 页面中嵌入 Python 逻辑,但Python 代码不能像 JavaScript 那样被浏览器原生执行,因此必须通过 PyScript 提供的
✅ 正确引用外部 Python 文件的方式
PyScript 支持 src 属性,可指定一个 URL 地址来加载外部 .py 文件:
⚠️ 注意:src 值必须是 有效的 HTTP(S) URL(如 /game_logic.py、https://example.com/script.py),不能是本地文件路径(如 file:///path/to/game.py) —— 浏览器出于安全限制会拒绝加载 file:// 协议下的脚本。
? 本地开发:启动简易 HTTP 服务器
为使 src="/game_logic.py" 正常工作,你需要让 HTML 和 .py 文件都通过 HTTP 协议提供服务。推荐使用 Python 内置的 HTTP 服务器:
立即学习“Python免费学习笔记(深入)”;
# 在项目根目录(包含 index.html 和 game_logic.py)执行: python -m http.server 8000
然后访问 http://localhost:8000 即可。此时 /game_logic.py 将被正确解析并执行。
? 补充说明与最佳实践
- 不支持 import 常规第三方包:PyScript 默认仅支持部分纯 Python 包(如 numpy、matplotlib 等已预编译为 WASM 的版本)。若 game_logic.py 使用了 pygame、tkinter 等依赖系统 API 或 C 扩展的库,将无法运行 —— 它们不适用于浏览器环境。
-
避免内联 + 外链混用:当
同时包含 src 属性和内部代码时,内部代码会被完全忽略,仅加载并执行远程文件。 - 调试建议:打开浏览器开发者工具(F12),在 Console 标签页中查看 PyScript 初始化日志与报错信息;也可在 .py 文件中添加 print() 语句辅助调试(输出会显示在控制台)。
- 生产部署提示:上线时请使用 Nginx、Vercel、GitHub Pages(配合自定义域名或 CNAME)等支持静态资源托管的服务,并确保 .py 文件 MIME 类型为 text/plain(多数服务默认支持)。
总之,PyScript 的 src 属性是组织 Python 逻辑、解耦 HTML 与业务代码的有效方式,但务必牢记其运行于浏览器沙箱中,能力边界与传统 Python 环境截然不同。合理规划功能模块(UI 交由 HTML/CSS/JS,计算/逻辑交由 PyScript),才能构建出稳健、可维护的交互式网页应用。











