瀏覽器控制臺報錯Failed to load module script:解決方法
錯誤
用nginx做vue3+vite2代理的時候出現(xiàn)了以下的報錯
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
原因
經(jīng)檢查，出現(xiàn)這種狀況是因為我的項目二級目錄和nginx轉(zhuǎn)發(fā)的目錄不匹配。 在nginx配置中，我是這樣寫的
location /h5-page {
try_files $uri $uri/ /jd-h5/index.html last;
}
而在vite配置中，我將base設(shè)置為h5-page;
export default defineConfig(({ mode }) => ({
base: '/h5-page/',
}));
由于我轉(zhuǎn)發(fā)的location和目錄的base都設(shè)置為h5-page，但是我卻實際上將打包好的文件放在了jd-h5這個目錄中，這讓nginx無法準(zhǔn)確定位到文件因而產(chǎn)生了上述的報錯；
解決方法
解決方法也很簡單，將不匹配的部分修正即可，我將目錄重命名為h5-page，然后修改nginx配置。
location /h5-page {
try_files $uri $uri/ /h5-page/index.html last;
}
總結(jié)
用二級目錄托管項目，如果不想造成混淆和報錯的話，應(yīng)當(dāng)嚴(yán)格遵照 目錄-轉(zhuǎn)發(fā)地址-項目base 統(tǒng)一的寫法。
以上就是瀏覽器控制臺報錯Failed to load module script:解決方法的詳細(xì)內(nèi)容，更多關(guān)于瀏覽器控制臺報錯解決的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Nginx反向代理與負(fù)載均衡實戰(zhàn)篇,需要的朋友可以參考下2019-03-03
在nginx中實現(xiàn)單位時間內(nèi)限制訪問頻率的教程
這篇文章主要介紹了在nginx中實現(xiàn)單位時間內(nèi)限制訪問頻率的教程,并非針對IP而是全局的訪問量限制,需要的朋友可以參考下2015-04-04
這篇文章主要給大家介紹了關(guān)于Nginx日志自定義記錄以及啟用日志緩沖區(qū)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Nginx具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要介紹了詳解nginx代理天地圖做緩存解決跨域問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
nginx+lua+redis 灰度發(fā)布實現(xiàn)方案
在微服務(wù)化進(jìn)程中,利用nginx+lua+redis實現(xiàn)灰度發(fā)布至關(guān)重要,,通過nginx+lua反向代理,根據(jù)客戶端ip進(jìn)行路由控制,配合redis存儲允許訪問微服務(wù)的ip地址,可以有效地進(jìn)行用戶分流,感興趣的可以了解一下2024-10-10
本文介紹了如何使用Kubernetes部署Nginx，并通過Nginx訪問Tomcat，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
Centos7.3 安裝部署Nginx并配置https的方法步驟
這篇文章主要介紹了Centos7.3 安裝部署Nginx并配置https的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Nginx基礎(chǔ)學(xué)習(xí)之realip模塊的使用方法
這篇文章主要給大家介紹了關(guān)于Nginx基礎(chǔ)學(xué)習(xí)之realip模塊使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Nginx具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了1分鐘搞定Nginx版本的平滑升級與回滾的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
nginx服務(wù)器access日志中大量400 bad request錯誤的解決方法
這篇文章主要介紹了nginx服務(wù)器access日志中大量400 bad request錯誤的解決方法,本文結(jié)論是空主機頭導(dǎo)致的大量400錯誤日志,關(guān)閉默認(rèn)主機的日志記錄就可以解決問題,需要的朋友可以參考下2015-01-01