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

【问题标题】：How to serve lazy-loaded Vue JS chunks from CDN如何从 CDN 提供延迟加载的 Vue JS 块
【发布时间】：2021-09-14 23:11:32
【问题描述】：

我正在开发一个用 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 路由器会损坏。如果我尝试直接在 Webpack 配置中更改 output.publicPath，我会从 Vue CLI 收到一个错误，说我无法直接修改它。

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

所以我的问题是，如何在从动态 Web 服务器为应用程序提供服务的同时从 CDN 加载所有静态资产（包括 JS 块）？是否可以仅通过更改 Vue CLI 或 Webpack 配置并且没有任何肮脏的“黑客”（例如修改生成的 JS 文件）来做到这一点？

【问题讨论】：

标签： laravel vue.js webpack vue-cli laravel-vapor

【解决方案1】：

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

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

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

【讨论】：