本地双击index.html会因file://协议导致fetch、ESM模块等失效;应使用Python内置服务器(如python -m http.server 8000)或VS Code的Live Server插件,通过http://协议运行以确保功能完整。
直接双击
就能打开,但部分功能会失效
浏览器本地打开 HTML 文件时,地址栏显示的是
协议,不是
或
。这意味着:
•
、
读取本地 JSON 或其他 HTML 文件会触发跨域错误(
或
)
• 某些现代 API(如
在部分 Chrome 版本中)可能受限
•
语句加载本地 JS 模块会报
用 Python 快速起一个本地 HTTP 服务(推荐)
不用装额外工具,系统自带 Python 就够用。关键是选对命令和端口:
• Python 3.x:运行
(推荐端口 8000、3000、5000,避开 80 需要 root)
• Python 2.7:用
• 服务启动后,浏览器访问
,就能完整跑起所有 AJAX、ESM、相对路径资源
• 注意:默认服务根目录是当前终端所在文件夹,确保
在该目录下,或 cd 进项目根目录再执行
VS Code 安装 Live Server 插件最省心
适合日常开发调试,尤其带实时刷新需求:
• 安装插件
(作者 Ritwick Dey)
• 右键点击
→ 选择
• 自动在浏览器打开
,并监听文件变化
• 注意:它默认不代理 API 请求,如果项目调用后端接口,仍需单独配代理或改请求地址;另外,它不会自动处理
路径,静态引入的第三方库得自己放
或用 CDN
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
GitHub Pages 不等于本地运行,别混淆部署和调试
很多人以为“能上 GitHub Pages 就代表本地也能跑”,其实不然:
• GitHub Pages 构建时会把整个仓库当根目录,而你本地双击时,浏览器认为当前 HTML 文件所在目录就是根
• 常见坑:
在 GitHub Pages 上没问题,但本地双击时若 HTML 不在项目根目录,就会 404
• 解决办法:统一用相对路径,并保持项目结构一致;或者用上面任一本地服务方式,让路径解析逻辑和线上一致
• 补充:GitHub Pages 默认不支持 PHP、Node.js 后端,纯静态 HTML/CSS/JS 才适用
立即学习
“
前端免费学习笔记(深入)
”;
本地运行的核心就一条:必须走
协议。双击只是权宜之计,真正要验证交互逻辑,就得启动一个最小 HTTP 服务——这点容易被忽略,尤其刚从 CodePen 或 JSFiddle 切过来的人。
index.htmlfile://http://https://fetch()XMLHttpRequestnet::ERR_FAILEDCORS policy: No 'Access-Control-Allow-Origin'localStorageimportFailed to load module scriptpython -m http.server 8000python -m SimpleHTTPServer 8000http://localhost:8000index.htmlLive Serverindex.htmlOpen with Live Serverhttp://127.0.0.1:5500./node_modules/lib/http://