學習如何使用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，因为它不再需要了。