Vite項目部署nginx后刷新頁面報錯：模塊腳本加載失敗的解決方案
Vite項目部署到Nginx服務器后，根路徑訪問正常，但刷新非根路徑（例如/me/userinfo）時，出現“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.”錯誤。此錯誤表明服務器返回了錯誤的MIME類型，瀏覽器無法正確解析JavaScript模塊。根本原因是Nginx服務器未正確處理非根路徑請求，導致返回HTML響應而非JavaScript模塊腳本。
解決方法需要從以下幾個方面入手：
-
vite.config.JS 中的 base 配置: 如果項目部署在非根路徑下（例如/app），則需要在vite.config.js中正確配置base屬性。例如：base: ‘/app/’。 這確保編譯后的index.html中所有資源路徑都包含正確的 base 前綴。
-
文件部署: 確認項目文件已完整且正確地發布到服務器的指定目錄，并檢查文件權限。
-
Nginx 配置： 對于不使用#號的非根路徑URL（例如/me/userinfo），需要在Nginx配置中添加rewrite規則，將所有非根路徑請求重定向到index.html。 這使得瀏覽器始終加載index.html，由Vite的客戶端路由機制處理具體路徑。 rewrite規則需根據實際Nginx配置調整。
-
URL 路徑： 如果URL使用#號（例如/me/userinfo/#），確保URL以/#/或/index.html/#/結尾，以正確識別hash路由。
通過檢查以上四個方面，結合服務器錯誤日志和網絡請求記錄（特別是返回404的請求），可以快速定位并解決問題。 特別注意檢查網絡請求記錄中404錯誤的具體請求路徑，這能幫助你精準定位問題所在。
