私は、Vue.js 3 で記述され、Vue CLI 5 (Webpack 5) で構築された単一ページ アプリケーションを開発しています。アプリケーションは AWS にデプロイされた Laravel アプリケーションによって提供され、デプロイメント ツールは Laravel Vapor です。また、このツールはすべての静的リソース (JS チャンクを含む) を AWS S3 にアップロードし、CloudFront 経由のアクセスを提供します。
Vue.js アプリケーションで使用されるすべての静的リソースを CDN からロードしたいと考えています。 CloudFront によって配布される URL は、ビルド時に ASSET_URL 環境変数で使用できます。私は、ローカル開発環境と運用環境の両方のリソース パスを正しく解決する独自の asset 関数を TS および SCSS で作成しました。静的リソース (画像、フォントなど) の URL を .scss または .vue ファイルに記述するときは常にこれらの関数を使用しており、すべてが正常に動作します。
ただし、Vue.js アプリケーションに CDN から JS チャンクをロードさせることができません。 vue.config.js の publicPath オプションを変更すると、Vue Router に問題が発生します。 Webpack 設定の Output.publicPath を直接変更しようとすると、Vue CLI は直接変更できないことを示すエラーをスローします。
そこで、生成された index.blade.php ファイル (index.html と同様) 内の静的リソースを指すすべての URL を書き換えるスクリプトを作成しました。最初の JS チャンクは次のとおりです。 CDN からロードされるようになりました。ただし、遅延ロードされたチャンクはすべて、Laravel アプリケーションがデプロイされているサーバーからロードされます。これらのパスは、生成された app.f73fadef.js ファイルで定義されているようです。
それでは、私の質問は、動的 Web サーバーからアプリケーションを提供しながら、CDN からすべての静的リソース (JS チャンクを含む) をロードするにはどうすればよいですか?生成された JS ファイルを変更するなどの「ブラックトリック」を行わずに、Vue CLI または Webpack の設定を変更するだけでこれを達成することは可能ですか?
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
ついにこの問題を解決しました。この問題は、次のルーター初期化コードによって発生します:
リーリーcreateWebHistory関数の引数を削除すると、CloudFront ディストリビューション URL のvue.config.jsで publicPath オプションを設定できるようになりました。 、すべてが正常に動作し始めます。index.blade.phpの URL を変更する独自のスクリプトは不要になったため、削除することもできました。