Vue.js / Webpack build "index.html" using a "static" subdomain for CSS and JS

To achieve this you would need to use webpack publicPath

You can configure webpack to build index.html using a different subdomain,

webpack.config.js

import webpack from 'webpack';

export default {
  output: {
    ..
    publicPath: 'https://static.example.com/js/',
  },
};

npm run build Webpack build the "index.html" would have

..
..
<script type="text/javascript" src="https://static.example.com/js/chunk-vendors.6f495bf3.js"></script>

For css,

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: 'https://static.example.com/css/',
            },
          },
          'css-loader',
        ],
      },
    ],
  },
};

You can also specify publicPath at runtime,

entry.js

__webpack_public_path__ = myRuntimePublicPath;

// rest of your application entry

Note: please consider adding a environment variable instead of hardcoding the asset CDN path, and pass the environment variable via npm scripts, alternately you can also define a global publicPath

var myRuntimePublicPath = 'https://static.example.com/js/'

and use it in the entry file (say entry.js) as displayed above.

refer: webpack publicPath and mini-css-extract-plugin publicPath

In case of using Vue Router

The base URL your application bundle will be deployed at publicPath (known as baseUrl before Vue CLI 3.3).

vue.config.js

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? 'https://static.example.com/js/'
    : '/'
}

Vue Router

// override the base to hardcoded default value as it gets the value from publicPath

base: '/'

This will allow subdomain for javaScript bundle of vuejs build.