Ketahui cara menggunakan CDN untuk menyediakan blok pemuatan malas untuk Vue JS

Question

Saya sedang membangunkan aplikasi satu halaman yang ditulis dalam Vue.js 3 dan dibina oleh Vue CLI 5 (Webpack 5). Aplikasi ini disampaikan oleh aplikasi Laravel yang digunakan untuk AWS, dan alat penggunaan ialah Laravel Vapor. Alat ini juga memuat naik semua sumber statik (termasuk ketulan JS) ke AWS S3 dan menyediakan akses melalui CloudFront.

Saya mahu memuatkan semua sumber statik yang digunakan dalam aplikasi Vue.js saya daripada CDN. Saya telah menggunakan fungsi ini semasa menulis URL untuk sumber statik (imej, fon, dll.) dalam ASSET_URL环境变量中获得。我已经在TS和SCSS中编写了自己的asset函数，能够正确解析本地开发和生产环境的资源路径。每当我在.scss或.vue fail yang diedarkan oleh CloudFront dan semuanya berfungsi dengan baik.

Walau bagaimanapun, saya tidak boleh mendapatkan apl Vue.js untuk memuatkan ketulan JS daripada CDN. Terdapat masalah dengan Penghala Vue apabila saya mengubah suai pilihan publicPath dalam vue.config.js. Jika saya cuba menukar terus output.publicPath dalam konfigurasi Webpack, Vue CLI akan melemparkan ralat yang mengatakan bahawa saya tidak boleh mengubah suainya secara langsung.

Jadi, saya menulis skrip yang menulis semula definisi dalam fail index.blade.php文件中指向静态资源的所有URL（类似于典型Vue.js项目中的index.html），现在初始JS块从CDN加载。然而，所有延迟加载的块仍然从部署Laravel应用程序的服务器加载。看起来这些路径在生成的app.f73fadef.js yang dihasilkan.

Jadi soalan saya ialah, bagaimana saya boleh memuatkan semua sumber statik (termasuk ketulan JS) daripada CDN semasa menyampaikan aplikasi daripada pelayan web dinamik? Adakah mungkin untuk mencapai ini hanya dengan menukar konfigurasi Vue CLI atau Webpack tanpa melakukan sebarang "helah hitam" seperti mengubah suai fail JS yang dihasilkan?

Answer 1

Saya akhirnya menyelesaikan masalah ini. Masalahnya disebabkan oleh kod permulaan penghala berikut:

createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

Setelah saya mengalih keluar createWebHistory函数的参数，我就能够在vue.config.js中设置publicPath选项为我的CloudFront分发URL，一切开始正常工作。我甚至能够移除我自己的脚本，它在index.blade.phptukar URL kerana ia tidak diperlukan lagi.