Erfahren Sie, wie Sie ein CDN verwenden, um Lazy-Loading-Blöcke für Vue JS bereitzustellen

Question

Ich entwickle eine Einzelseitenanwendung, die in Vue.js 3 geschrieben und mit Vue CLI 5 (Webpack 5) erstellt wurde. Die Anwendung wird von einer auf AWS bereitgestellten Laravel-Anwendung bereitgestellt, und das Bereitstellungstool ist Laravel Vapor. Das Tool lädt außerdem alle statischen Ressourcen (einschließlich JS-Chunks) auf AWS S3 hoch und bietet Zugriff über CloudFront.

Ich möchte alle statischen Ressourcen, die in meiner Vue.js-Anwendung verwendet werden, vom CDN laden. Ich habe diese Funktionen beim Schreiben von URLs für statische Ressourcen (Bilder, Schriftarten usw.) in ASSET_URL环境变量中获得。我已经在TS和SCSS中编写了自己的asset函数，能够正确解析本地开发和生产环境的资源路径。每当我在.scss或.vue-Dateien verwendet, die von CloudFront verteilt werden, und alles funktioniert einwandfrei.

Allerdings kann ich die Vue.js-App nicht dazu bringen, die JS-Chunks vom CDN zu laden. Es gibt ein Problem mit Vue Router, wenn ich die Option publicPath in vue.config.js ändere. Wenn ich versuche, den Output.publicPath in der Webpack-Konfiguration direkt zu ändern, gibt die Vue-CLI eine Fehlermeldung aus, die besagt, dass ich ihn nicht direkt ändern kann.

Also habe ich ein Skript geschrieben, das die Definitionen in der generierten index.blade.php文件中指向静态资源的所有URL（类似于典型Vue.js项目中的index.html），现在初始JS块从CDN加载。然而，所有延迟加载的块仍然从部署Laravel应用程序的服务器加载。看起来这些路径在生成的app.f73fadef.js-Datei neu schreibt.

Meine Frage lautet also: Wie lade ich alle statischen Ressourcen (einschließlich JS-Chunks) von einem CDN, während ich die Anwendung von einem dynamischen Webserver aus bereitstelle? Ist es möglich, dies einfach durch Ändern der Vue-CLI- oder Webpack-Konfiguration zu erreichen, ohne irgendwelche „schwarzen Tricks“ wie das Ändern der generierten JS-Dateien anzuwenden?

Answer 1

我终于解决了这个问题。问题是由以下路由器初始化代码引起的：

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

一旦我移除了createWebHistory函数的参数，我就能够在vue.config.js中设置publicPath选项为我的CloudFront分发URL，一切开始正常工作。我甚至能够移除我自己的脚本，它在index.blade.php中改变URL，因为它不再需要了。