title: How to serve lazy-loaded Vue JS chunks from CDN
body: <p>I work on a single-page application written in Vue.js 3 and built by Vue CLI 5 (Webpack 5). The app is being served from a Laravel app which is deployed to AWS by <a href="https://vapor.laravel.com/" rel="nofollow noreferrer">Laravel Vapor</a>. This tool also uploads all static assets (including JS chunks) to AWS S3 and make them available via CloudFront.</p>
  <p>I want to load all static assets used in the Vue.js app from this CDN. The URL of the CloudFront distribution is available at build time in <code>ASSET_URL</code> environment variable. I have written my own <code>asset</code> functions in both TS and SCSS which are able to resolve asset paths properly for both local development and production environment. I use these functions whenever I write a URL of a static asset (image, font, etc.) in either <code>.scss</code> or <code>.vue</code> file and everything works fine.</p>
  <p>But I am not able to make Vue.js app load JS chunks from CDN. When I modify <a href="https://next.cli.vuejs.org/config/#publicpath" rel="nofollow noreferrer">publicPath</a> option in <code>vue.config.js</code>, Vue Router gets broken. If I try to change <a href="https://webpack.js.org/guides/public-path/" rel="nofollow noreferrer">output.publicPath</a> directly in Webpack config, I get an error from Vue CLI saying that I cannot modify it directly.</p>
  <p>So I have written a script that rewrites all URLs pointing to static assets in the generated <code>index.blade.php</code> file (similar to <code>index.html</code> in a typical Vue.js project) and initial JS chunks are loaded from CDN now. However, all lazy-loaded chunks are still being loaded from the server where Laravel app is deployed. It looks like these paths are somehow defined the generated <code>app.f73fadef.js</code> file.</p>
  <p>So my question is, how can I load all static assets (including JS chunks) from CDN while serving an app from a dynamic web server? Is it even possible to do this just by changing Vue CLI or Webpack config and without any dirty &quot;hacks&quot; (like modifying generated JS files)?</p>