本文介绍使用 pyscript 框架通过 `
在现代 Web 前端中直接运行 Python 代码，需借助 PyScript —— 一个基于 WebAssembly 的前端 Python 运行时框架。它允许你在 HTML 页面中嵌入 Python 逻辑，但Python 代码不能像 JavaScript 那样被浏览器原生执行，因此必须通过 PyScript 提供的 <py-script> 标签加载，并配合本地 HTTP 服务运行。
✅ 正确引用外部 Python 文件的方式
PyScript 支持 src 属性，可指定一个 URL 地址来加载外部 .py 文件：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<py-script src="/game_logic.py"></py-script>
</body>
</html>⚠️ 注意：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 扩展的库，将无法运行 —— 它们不适用于浏览器环境。
- 避免内联 + 外链混用：当 <py-script> 同时包含 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），才能构建出稳健、可维护的交互式网页应用。
