在進(jìn)行網(wǎng)頁(yè)開(kāi)發(fā)時(shí)，有時(shí)需要在網(wǎng)頁(yè)中引用本地的js/css文件以便于修改和調(diào)試。但是直接通過(guò)`file:///`方式添加會(huì)提示不允許的script來(lái)源URI。因此，可以通過(guò)使用http協(xié)議訪問(wèn)local

在進(jìn)行網(wǎng)頁(yè)開(kāi)發(fā)時(shí)，有時(shí)需要在網(wǎng)頁(yè)中引用本地的js/css文件以便于修改和調(diào)試。但是直接通過(guò)`file:///`方式添加會(huì)提示不允許的script來(lái)源URI。因此，可以通過(guò)使用http協(xié)議訪問(wèn)localhost來(lái)實(shí)現(xiàn)在網(wǎng)頁(yè)中引用本地js/css文件。

設(shè)置本地Web Server

首先，在打開(kāi)開(kāi)發(fā)者工具的情況下，嘗試添加本地保存的js或css文件可能會(huì)受限。為了解決這個(gè)問(wèn)題，可以搭建一個(gè)簡(jiǎn)單的本地web服務(wù)器處理http請(qǐng)求。一種簡(jiǎn)單的方法是使用Python語(yǔ)言。在PyCharm中新建一個(gè)Python項(xiàng)目，然后在項(xiàng)目設(shè)置中搜索并安裝Tornado庫(kù)5.1版本。

準(zhǔn)備本地文件

將想要在網(wǎng)頁(yè)中引用的js和css文件放置在本地某個(gè)目錄下，比如D盤的tmp文件夾內(nèi)。確保這些文件可以被Web服務(wù)器訪問(wèn)到。

編寫簡(jiǎn)易Web Server

編寫一個(gè)簡(jiǎn)單的Web Server，可以通過(guò)Python代碼來(lái)實(shí)現(xiàn)。該Server可以處理http請(qǐng)求，并返回對(duì)應(yīng)的js和css文件。不同的請(qǐng)求路徑對(duì)應(yīng)著不同的文件，確保請(qǐng)求正確匹配文件。

在網(wǎng)頁(yè)中引用本地文件

在一個(gè)在線的網(wǎng)頁(yè)上，通過(guò)開(kāi)發(fā)者工具使用http協(xié)議訪問(wèn)localhost加上指定端口號(hào)來(lái)獲取剛才在本地搭建的簡(jiǎn)易Web Server。通過(guò)網(wǎng)絡(luò)面板可以查看到css和js文件成功被下載，同時(shí)也可以從響應(yīng)頭中看到Server是TornadoServer。

解決https頁(yè)面問(wèn)題

如果網(wǎng)頁(yè)是使用https協(xié)議的，可能會(huì)阻止加載混合內(nèi)容（即不允許http請(qǐng)求）。為了解決這個(gè)問(wèn)題，需要搭建一個(gè)本地https的Server來(lái)保證加載的文件能夠被正確引用。

通過(guò)以上步驟，我們可以成功在網(wǎng)頁(yè)中引用本地的js/css文件，方便進(jìn)行修改和調(diào)試。搭建本地Web Server不僅提高了開(kāi)發(fā)效率，同時(shí)也能更好地模擬線上環(huán)境，確保網(wǎng)頁(yè)在正式上線前能夠正常運(yùn)行。