在 NuxtJS 建置中自訂檔案路徑而不更改路由器選項：逐步指南

Question

我使用 NuxtJS 開發了一個 SPA (ssr: false)。建置後，javascript 和 css 檔案的檔案路徑是相對於網域的根資料夾而不是 dist 資料夾。例如 <script src="/_nuxt/e247009.js"></script> 會導致瀏覽器拋出錯誤

「由於 MIME 類型（「text/html」）不符（X-Content-Type-Options：nosniff），來自「url」的資源被阻止。」

我的 url css fonts-face 內的路徑也有這個問題。

我可以使用此解決方案 https://stackoverflow.com/a/61638555/8488702 透過設定路由器選項來解決錯誤，如下所示：

router: {
  base: './'
}

但現在出現了另一個問題，那就是當我載入位於專案 nuxt router 根目錄中的 index.html 時顯示錯誤

找不到該頁面

如何在不更改路由器選項的情況下自訂檔案路徑，以免路由器損壞？

Answer 1

OP 使用他的 Webstorm IDE 運行該項目，認為 target: 'static' 將允許它在本地環境上工作。即使它可以在生產中運行，因為生成了實際的靜態文件（這些文件確實可以託管在 CDN 上），但現代開發也沒有那麼簡單。

因此，我們確實需要使用 webpack-dev-server 內建本機伺服器來支援現代開發的所有強大功能（HMR、檔案雜湊、SASS 等...）。

執行 yarn dev （或 npm run dev）將允許一個正常工作的項目，並由 Nuxt 核心團隊為您完成已配置的 Webpack v4 配置。