ルーターオプションを変更せずに NuxtJS ビルドのファイルパスをカスタマイズする: ステップバイステップガイド

Question

NuxtJS を使用して SPA を開発しました (ssr: false)。ビルド後、JavaScript ファイルと CSS ファイルのファイル パスは、dist フォルダーではなく、ドメインのルート フォルダーを基準にした相対パスになります。たとえば、<script src="/_nuxt/e247009.js"></script> とすると、ブラウザでエラーがスローされます

「'url' のリソースは、MIME タイプ ("text/html") の不一致 (X-Content-Type-Options: nosniff) のためブロックされています。」

My url css fonts-face 内のパスにもこの問題があります。

このソリューション https://stackoverflow.com/a/61638555/8488702 を使用して、ルーター オプションを次のように設定することでエラーを解決できました。 リーリー

しかし、ここで別の問題が発生します。つまり、プロジェクト nuxt ルーターのルート ディレクトリにある

index.html をロードすると、エラーが表示されます。 ＃＃＃ページが見つかりませんでした＃＃＃

ルーターの損傷を避けるために、ルーターのオプションを変更せずにファイル パスをカスタマイズするにはどうすればよいですか?

Answer 1

OP は、target: 'static' を使用すればローカル環境で動作できると考え、Webstorm IDE を使用してプロジェクトを実行しました。実際の静的ファイルが生成されるため (実際に CDN でホストできる)、実稼働環境では機能しますが、最新の開発はそれほど単純ではありません。

したがって、最新の開発のすべての強力な機能 (HMR、ファイル ハッシュ、SASS など) をサポートするには、webpack-dev-server 組み込みローカル サーバーを実際に使用する必要があります。

#yarn dev (または npm run dev) を実行すると、Nuxt コア チームによってすでに構成されている Webpack v4 構成を使用してプロジェクトを動作させることができます。