如何在网页中引用本地js/css（localhost）

在进行网页开发时，有时需要在网页中引用本地的js/css文件以便于修改和调试。但是直接通过`file:///`方式添加会提示不允许的script来源URI。因此，可以通过使用http协议访问localhost来实现在网页中引用本地js/css文件。

设置本地Web Server

首先，在打开开发者工具的情况下，尝试添加本地保存的js或css文件可能会受限。为了解决这个问题，可以搭建一个简单的本地web服务器处理http请求。一种简单的方法是使用Python语言。在PyCharm中新建一个Python项目，然后在项目设置中搜索并安装Tornado库5.1版本。

准备本地文件

将想要在网页中引用的js和css文件放置在本地某个目录下，比如D盘的tmp文件夹内。确保这些文件可以被Web服务器访问到。

编写简易Web Server

编写一个简单的Web Server，可以通过Python代码来实现。该Server可以处理http请求，并返回对应的js和css文件。不同的请求路径对应着不同的文件，确保请求正确匹配文件。

在网页中引用本地文件

在一个在线的网页上，通过开发者工具使用http协议访问localhost加上指定端口号来获取刚才在本地搭建的简易Web Server。通过网络面板可以查看到css和js文件成功被下载，同时也可以从响应头中看到Server是TornadoServer。

解决https页面问题

如果网页是使用https协议的，可能会阻止加载混合内容（即不允许http请求）。为了解决这个问题，需要搭建一个本地https的Server来保证加载的文件能够被正确引用。

通过以上步骤，我们可以成功在网页中引用本地的js/css文件，方便进行修改和调试。搭建本地Web Server不仅提高了开发效率，同时也能更好地模拟线上环境，确保网页在正式上线前能够正常运行。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。