使用Python 3.11.2 Web服务器测试Solidity合约时遇页面及报错问题

一、Python内置服务器的问题出在哪 #

Python自带的python -m http.server就是个简单的静态文件浏览器，只会列目录，不会自动把index.html当首页加载；而且浏览器根本不认.ts文件，得先转成.js才能跑。至于/favicon.ico的404，就是你项目里没放这个图标文件，小事儿；ConnectionAbortedError一般是浏览器请求断了或者服务器没正确响应导致的。

二、先把Python服务器的问题搞定 #

1. 切换到src目录启动服务器
   别在项目根目录跑命令，先切到src文件夹再启动：

   cd src
   python -m http.server 8000
   

   这样访问localhost:8000就会直接加载index.html，不会再显示目录了。

2. 把TypeScript转成JavaScript
   浏览器读不了.ts，得用tsc编译：

   • 先装TypeScript：npm install -g typescript
   • 到src目录执行编译：tsc index.ts
   • 然后把index.html里引入的index.ts改成index.js：

     <script src="./index.js"></script>
     

3. 解决favicon.ico的404
   随便找个.ico图标丢src里，命名成favicon.ico就行；或者在index.html里加一行：

   <link rel="icon" href="./favicon.ico" type="image/x-icon">
   

三、更适合测Web3合约的本地服务器 #

Python服务器功能太弱，长期测合约WebUI的话，换这些工具：

• Vite：轻量又快，自带TS编译和热更新，初始化项目直接跑npm create vite@latest my-web3-project -- --template vanilla-ts，然后npm install+npm run dev就能启动，省心。
• Hardhat：不仅能本地部署Solidity合约，还带前端测试服务器，适合端到端测合约和WebUI的交互。
• Ganache：专门的以太坊本地测试链，自带UI能看合约状态，搭配Vite或者Parcel用就行。

四、排查index.ts的问题 #

要是按上面弄完还是空白页，打开浏览器控制台（F12）看报错：

• 检查index.js有没有加载成功，会不会404
• 检查Metamask的初始化代码，比如是不是等页面加载完再调用eth_requestAccounts，有没有连对本地测试链的RPC地址

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