Apprenez à utiliser un CDN pour servir des blocs de chargement paresseux pour Vue JS

Question

Je développe une application monopage écrite en Vue.js 3 et construite par Vue CLI 5 (Webpack 5). L'application est servie par une application Laravel déployée sur AWS et l'outil de déploiement est Laravel Vapor. L'outil télécharge également toutes les ressources statiques (y compris les morceaux JS) sur AWS S3 et fournit un accès via CloudFront.

Je souhaite charger toutes les ressources statiques utilisées dans mon application Vue.js depuis CDN. J'ai utilisé ces fonctions lors de l'écriture d'URL pour des ressources statiques (images, polices, etc.) dans des fichiers ASSET_URL环境变量中获得。我已经在TS和SCSS中编写了自己的asset函数，能够正确解析本地开发和生产环境的资源路径。每当我在.scss或.vue distribués par CloudFront et tout fonctionne bien.

Cependant, je n'arrive pas à faire en sorte que l'application Vue.js charge les morceaux JS à partir du CDN. Il y a un problème avec Vue Router lorsque je modifie l'option publicPath dans vue.config.js. Si j'essaie de modifier directement le fichier output.publicPath dans la configuration du Webpack, Vue CLI générera une erreur indiquant que je ne peux pas le modifier directement.

J'ai donc écrit un script qui réécrit les définitions dans le fichier index.blade.php文件中指向静态资源的所有URL（类似于典型Vue.js项目中的index.html），现在初始JS块从CDN加载。然而，所有延迟加载的块仍然从部署Laravel应用程序的服务器加载。看起来这些路径在生成的app.f73fadef.js généré.

Ma question est donc la suivante : comment charger toutes les ressources statiques (y compris les morceaux JS) à partir d'un CDN tout en servant l'application à partir d'un serveur Web dynamique ? Est-il possible d'y parvenir simplement en modifiant la configuration de Vue CLI ou Webpack sans faire de « trucs noirs » comme modifier les fichiers JS générés ?

Answer 1

J'ai finalement résolu ce problème. Le problème est dû au code d'initialisation du routeur suivant :

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

Une fois, j'ai supprimé l'URL de changement createWebHistory函数的参数，我就能够在vue.config.js中设置publicPath选项为我的CloudFront分发URL，一切开始正常工作。我甚至能够移除我自己的脚本，它在index.blade.php car elle n'était plus nécessaire.