瀏覽器控制臺報錯Failed to load module script:解決方法

錯誤

用nginx做vue3+vite2代理的時候出現了以下的報錯

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.

原因

經檢查，出現這種狀況是因為我的項目二級目錄和nginx轉發的目錄不匹配。 在nginx配置中，我是這樣寫的

而在vite配置中，我將base設置為h5-page;

由于我轉發的location和目錄的base都設置為h5-page，但是我卻實際上將打包好的文件放在了jd-h5這個目錄中，這讓nginx無法準確定位到文件因而產生了上述的報錯；

解決方法

解決方法也很簡單，將不匹配的部分修正即可，我將目錄重命名為h5-page，然后修改nginx配置。

總結

用二級目錄托管項目，如果不想造成混淆和報錯的話，應當嚴格遵照 目錄-轉發地址-項目base 統一的寫法。