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

Question

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

我想从此 CDN 加载 Vue.js 应用程序中使用的所有静态资产。 CloudFront 发行版的 URL 在构建时在 ASSET_URL 环境变量中可用。我在 TS 和 SCSS 中编写了自己的 asset 函数，它们能够为本地开发和生产环境正确解析资产路径。每当我在 .scss 或 .vue 文件中写入静态资产（图像、字体等）的 URL 时，我都会使用这些函数，并且一切正常。

但我无法使 Vue.js 应用程序从 CDN 加载 JS 块。当我在 Webpack config 中直接修改 publicPath option in vue.config.js, Vue Router gets broken. If I try to change 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 中的 URLs，因为它不再需要了。

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

How to serve lazy-loaded Vue JS chunks from CDN

laravel

webpack

vue.js

vue-cli

laravel-vapor