Search code examples
vue-clivue-cli-3vue-cli-4

Keeping asset and public path different in vue app for CDN

vue has this option publicPath which lets an app to be deployed on subpath: foobar.com/my-path , making links and every asset accessible via it.

From performance standpoint, I want to enable CDN on my application's assets. How can I use the URL specifically for assets (and not the hyperlinks)?

Example: ./my-path/assets/app.js should become https://my-staging-cdn.com/my-path/assets/app.js
./my-path/url-2.html should remain the same

The configuration below allows me to set the path and assets directory, but not able to figure out how to set cdn URL for assets

module.exports = {
  publicPath: ‘/my-path/‘,
  assetsDir: 'assets'
}

Cannot do: publicPath: process.env.NODE_ENV === 'production' ? 'https://my-staging-cdn.com/my-path' : '/my-path/', as it will change the URL in application's links too.

Solution

  • Wasn't able to get the CDN working or assets out of the box. I tried other strategies like pre-rendering or Nuxt, but because of huge number of pages, it wasn't an option.

    The objective was to get SEO bots to read rendered page, so I circled out on Rendertron and deployed it's instance and put it in my reverse proxy behind the application. This worked.