如何从 CDN 提供延迟加载的 Vue JS 块

如何解决如何从 CDN 提供延迟加载的 Vue JS 块

我正在开发一个用 Vue.js 3 编写并由 Vue CLI 5 (Webpack 5) 构建的单页应用程序。该应用程序由 Laravel Vapor 部署到 AWS 的 Laravel 应用程序提供服务。此工具还将所有静态资产（包括 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 文件）来做到这一点？

解决方法

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

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

删除 createWebHistory 函数的参数后，我能够将 vue.config.js 中的 publicPath 选项设置为我的 CloudFront 分配 URL，一切都开始正常工作。我什至能够删除我自己的脚本，因为它不再需要更改 index.blade.php 中的 URL。