Search code examples
javascriptvue.jsvue-cli

Webpack: modify default assets path location

I have a Vue app which uses Webpack for minimizing the code.

Is there a way to parse the chunks and modify the base path from which webpack loads the assets?

Eg by default webpack loads assets from "/js" or "/css", etc. Due to server configuration I need it to load them from "/vue_dist/js" or "/vue_dist/css"

How could I do that?

Solution

  • You can use publicPath configuration prop provided by Vue CLI. Do not publicPath with Webpack's output.publicPath. These two are different.

    In your vue.config.js, you can override the publicPath property as shown:

    module.exports = {
  publicPath: `vue_dist`,
  
  // other config...
}

    However, if you need more control over public path, then you must eject the configuration and then use Webpack's advanced public path.

    Note vue-cli@3 - With version 3, you should never have to eject the Webpack configuration. It addresses almost all the needs of custom configurations.