Configuration Reference #

Global CLI Config #

Some global configurations for @vue/cli, such as your preferred package manager and your locally saved presets, are stored in a JSON file named .vuerc in your home directory. You can edit this file directly with your editor of choice to change the saved options.

You can also use the vue config command to inspect or modify the global CLI config.

Target Browsers #

See the Browser Compatibility section in guide.

vue.config.js #

vue.config.js is an optional config file that will be automatically loaded by @vue/cli-service if it's present in your project root (next to package.json). You can also use the vue field in package.json, but do note in that case you will be limited to JSON-compatible values only.

The file should export an object containing options:

// vue.config.js

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
  // options...
}

Or, you can use the defineConfig helper from @vue/cli-service, which could provide better intellisense support:

// vue.config.js
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  // options...
})

baseUrl #

Deprecated since Vue CLI 3.3, please use publicPath instead.

publicPath #

• Type: string

• Default: '/'

  The base URL your application bundle will be deployed at (known as baseUrl before Vue CLI 3.3). This is the equivalent of webpack's output.publicPath, but Vue CLI also needs this value for other purposes, so you should always use publicPath instead of modifying webpack output.publicPath.

  By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g. https://www.my-app.com/. If your app is deployed at a sub-path, you will need to specify that sub-path using this option. For example, if your app is deployed at https://www.foobar.com/my-app/, set publicPath to '/my-app/'.

  The value can also be set to an empty string ('') or a relative path (./) so that all assets are linked using relative paths. This allows the built bundle to be deployed under any public path, or used in a file system based environment like a Cordova hybrid app.

  Limitations of relative publicPath

  Relative publicPath has some limitations and should be avoided when:

  • You are using HTML5 history.pushState routing;

  • You are using the pages option to build a multi-paged app.

  This value is also respected during development. If you want your dev server to be served at root instead, you can use a conditional value:

  module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
      ? '/production-sub-path/'
      : '/'
  }
  

outputDir #

• Type: string

• Default: 'dist'

  The directory where the production build files will be generated in when running vue-cli-service build. Note the target directory contents will be removed before building (this behavior can be disabled by passing --no-clean when building).

  TIP

  Always use outputDir instead of modifying webpack output.path.

assetsDir #