本文介绍使用 pyscript 框架通过 `` 标签加载外部 python 文件的方法，并说明本地开发时需配合 http 服务器运行，避免因浏览器安全策略导致的跨域或文件读取失败问题。

在 Web 前端中直接运行 Python 代码并非原生支持，但借助 PyScript（一个基于 WebAssembly 的 Python 运行时框架），你可以在浏览器中执行 Python 脚本，并像引入 JS 或 CSS 那样模块化组织代码。关键在于：不能直接用 file:// 协议加载本地 .py 文件，而必须通过 HTTP 服务提供。

✅ 正确做法：使用 + 本地 HTTP 服务器

首先，在 HTML 中引入 PyScript 运行时（推荐使用 CDN）：

⚠️ 注意：src 属性值是相对或绝对 URL（如 ./game_logic.py、/scripts/main.py 或 https://example.com/logic.py），不是本地文件路径（如 C:\my\game.py）。浏览器出于安全限制，禁止前端脚本直接读取本地文件系统。

接着，确保你的 Python 文件（例如 game_logic.py）放在与 HTML 同一目录（或按路径正确配置），内容示例：

# game_logic.py
from pyscript import display
import random

def start_game():
    num = random.randint(1, 100)
    display(f"? 游戏已启动！随机数已生成：{num}", append=False)

# 自动执行初始化（可选）
start_game()

? 本地开发必备：启动简易 HTTP 服务器

在包含 index.html 和 game_logic.py 的目录下，打开终端，运行：

# Python 3.7+
python -m http.server 8000

然后访问 http://localhost:8000 即可正常加载并执行外部 Python 文件。若使用其他端口（如 8080），请同步调整命令和浏览器地址。

❗重要注意事项

• 不支持 import 大多数第三方包：PyScript 当前仅内置少量常用库（如 micropip、random、math），numpy、pygame 等无法直接使用；复杂游戏逻辑建议拆分为前端（HTML/CSS/JS）+ 后端（Flask/FastAPI）架构。
• 无 DOM 操作权限？用 pyscript.display() 或 Element API：

  from pyscript import Element
  Element("output").write("Hello from Python!")

• 调试技巧：打开浏览器开发者工具 → Console 标签页，查看 PyScript 错误日志（如 404 Not Found 表示路径错误，CORS 错误说明未启用 HTTP 服务）。

✅ 总结

通过合理使用 与本地 HTTP 服务，你既能保持 Python 游戏逻辑的清晰结构，又能无缝集成到 HTML UI 中——这是初学者迈向全栈 Python Web 开发的实用第一步。