解决浏览器无法正常渲染本地 html 的问题
dys-en
编辑于 2024年12月24日 14:26
收录于文集
共23篇

由于浏览器安全策略的限制,当我们直接打开电脑本地的 html 文件,很可能出现白屏等显示残缺的问题。此时浏览器 url 栏往往是这样的:

代码块
JavaScript
自动换行
复制代码
file:///.....
复制成功

这说明我们以 file:// 协议打开了这个文件。而这个协议受制于浏览器的安全策略,无法加载css,js等资源。

此时,可以通过 python 创建本地服务器的方式来解除限制。此方法需要 python 环境。

首先打开 cmd,切换到html文件所在的目录。

然后输入

代码块
Shell
自动换行
复制代码
python -m http.server 8000
复制成功

如果出现任何错误,建议复制报错信息并利用搜索引擎查询。最常见的错误是尚未安装 python 环境。python 可以在这个网站下载安装

代码块
JavaScript
自动换行
复制代码
https://python123.io/downloads
复制成功

若你的 html 文件名为

代码块
JavaScript
自动换行
复制代码
index.html
复制成功

那我们直接在浏览器打开

代码块
JavaScript
自动换行
复制代码
http://localhost:8000
复制成功

往往即可正常渲染 html 文件。

而如果你的 html 文件名不是 index,例如

代码块
JavaScript
自动换行
复制代码
abc.html
复制成功

那我们直接通过浏览器打开对应文件即可。

代码块
JavaScript
自动换行
复制代码
http://localhost:8000/abc.html
复制成功

当然,如果文件名是 index,也是可以这样打开的。

在浏览完成之后,cmd 输入 Ctr+C 即可中断。然后退出 cmd 即可。

以下是 cmd 的一次运行实录。

代码块
JavaScript
自动换行
复制代码
Microsoft Windows
(c) Microsoft Corporation。

>cd desktop/lesson

Desktop\lesson>python -m http.server 8000
Serving HTTP on :: port 8000 (http://[::]:8000/) ...

Keyboard interrupt received, exiting.
复制成功