Passen Sie Dateipfade in NuxtJS-Builds an, ohne die Router-Optionen zu ändern: Schritt-für-Schritt-Anleitung

Question

Ich habe ein SPA mit NuxtJS entwickelt (ssr: false). Nach dem Erstellen sind die Dateipfade für die Javascript- und CSS-Dateien relativ zum Stammordner der Domäne und nicht zum dist-Ordner. Beispielsweise führt <script src="/_nuxt/e247009.js"></script> dazu, dass der Browser einen Fehler ausgibt

„Ressource von „url“ ist aufgrund einer Nichtübereinstimmung des MIME-Typs („text/html“) blockiert (X-Content-Type-Options: nosniff).“

Ich habe auch dieses Problem mit dem Pfad innerhalb meiner

CSS-Schriftarten. url

Ich konnte diese Lösung https://stackoverflow.com/a/61638555/8488702 verwenden, um den Fehler zu beheben, indem ich die Router-Optionen wie folgt festlegte:

router: {
  base: './'
}

Aber jetzt tritt ein weiteres Problem auf: Wenn ich den

im Stammverzeichnis des Projekts nuxt router lade, wird ein Fehler angezeigt index.html

Die Seite kann nicht gefunden werden

Wie kann ich den Dateipfad anpassen, ohne die Router-Optionen zu ändern, um eine Beschädigung des Routers zu vermeiden?

Answer 1

OP 使用他的 Webstorm IDE 运行该项目，认为 target: 'static' 将允许它在本地环境上工作。即使它可以在生产中运行，因为生成了实际的静态文件（这些文件确实可以托管在 CDN 上），但现代开发也没有那么简单。

因此，我们确实需要使用 webpack-dev-server 内置本地服务器来支持现代开发的所有强大功能（HMR、文件哈希、SASS 等...）。

运行 yarn dev （或 npm run dev）将允许一个正常工作的项目，并由 Nuxt 核心团队为您完成已配置的 Webpack v4 配置。