学习如何使用CDN提供Vue JS的懒加载块

Question

我正在开发一个使用Vue.js 3编写的单页应用程序，并由Vue CLI 5（Webpack 5）构建。该应用程序由部署到AWS的Laravel应用程序提供服务，而部署工具是Laravel Vapor。该工具还将所有静态资源（包括JS块）上传到AWS S3，并通过CloudFront提供访问。

我希望从CDN加载Vue.js应用程序中使用的所有静态资源。CloudFront分发的URL在构建时可在ASSET_URL环境变量中获得。我已经在TS和SCSS中编写了自己的asset函数，能够正确解析本地开发和生产环境的资源路径。每当我在.scss或.vue文件中编写静态资源（图像、字体等）的URL时，我都使用这些函数，一切都正常工作。

但是，我无法让Vue.js应用程序从CDN加载JS块。当我修改vue.config.js中的publicPath选项时，Vue Router会出现问题。如果我尝试直接更改Webpack配置中的output.publicPath，Vue CLI会报错，说我不能直接修改它。

因此，我编写了一个脚本，重写了生成的index.blade.php文件中指向静态资源的所有URL（类似于典型Vue.js项目中的index.html），现在初始JS块从CDN加载。然而，所有延迟加载的块仍然从部署Laravel应用程序的服务器加载。看起来这些路径在生成的app.f73fadef.js文件中定义。

所以我的问题是，我如何在从动态Web服务器提供应用程序的同时，从CDN加载所有静态资源（包括JS块）？是否可能仅通过更改Vue CLI或Webpack配置而无需进行任何“黑科技”（如修改生成的JS文件）来实现这一点？

Answer 1

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

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

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