Configuration Reference | Vue CLI (original) (raw)

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

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

outputDir

assetsDir

indexPath

filenameHashing

pages

module.exports = {  
  pages: {  
    index: {  
      // entry for the page  
      entry: 'src/index/main.js',  
      // the source template  
      template: 'public/index.html',  
      // output as dist/index.html  
      filename: 'index.html',  
      // when using title option,  
      // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>  
      title: 'Index Page',  
      // chunks to include on this page, by default includes  
      // extracted common chunks and vendor chunks.  
      chunks: ['chunk-vendors', 'chunk-common', 'index']  
    },  
    // when using the entry-only string format,  
    // template is inferred to be `public/subpage.html`  
    // and falls back to `public/index.html` if not found.  
    // Output filename is inferred to be `subpage.html`.  
    subpage: 'src/subpage/main.js'  
  }  
}

TIP
When building in multi-page mode, the webpack config will contain different plugins (there will be multiple instances of html-webpack-plugin and preload-webpack-plugin). Make sure to run vue inspect if you are trying to modify the options for those plugins.

lintOnSave

// vue.config.js  
module.exports = {  
  devServer: {  
    overlay: {  
      warnings: true,  
      errors: true  
    }  
  }  
}

When lintOnSave is a truthy value, eslint-loader will be applied in both development and production. If you want to disable eslint-loader during production build, you can use the following config: 

// vue.config.js  
module.exports = {  
  lintOnSave: process.env.NODE_ENV !== 'production'  
}

runtimeCompiler

transpileDependencies

Jest config

This option is not respected by the cli-unit-jest plugin, because in jest, we don't have to transpile code from /node_modules unless it uses non-standard features - Node >8.11 supports the latest ECMAScript features already.

However, jest sometimes has to transform content from node_modules if that code uses ES6 import/export syntax. In that case, use the transformIgnorePatterns option in jest.config.js.

See the plugin's README for more information.

productionSourceMap

crossorigin

integrity

configureWebpack

chainWebpack

css.modules

css.requireModuleExtension

Both removed in v5, see Working with CSS > CSS Modules for guidance on how to treat all style imports as CSS Modules.

css.sourceMap

css.loaderOptions

module.exports = {  
  css: {  
    loaderOptions: {  
      css: {  
        // options here will be passed to css-loader  
      },  
      postcss: {  
        // options here will be passed to postcss-loader  
      }  
    }  
  }  
}

Supported loaders are:

devServer

devServer.proxy

module.exports = {  
  devServer: {  
    proxy: 'http://localhost:4000'  
  }  
}

This will tell the dev server to proxy any unknown requests (requests that did not match a static file) to http://localhost:4000.
WARNING
When devServer.proxy is set to a string, only XHR requests will be proxied. If you want to test an API URL, don't open it in the browser, use an API tool like Postman instead.
If you want to have more control over the proxy behavior, you can also use an object with path: options pairs. Consult http-proxy-middleware for full options: 

module.exports = {  
  devServer: {  
    proxy: {  
      '^/api': {  
        target: '<url>',  
        ws: true,  
        changeOrigin: true  
      },  
      '^/foo': {  
        target: '<other_url>'  
      }  
    }  
  }  
}

devServer.inline

parallel

WARNING

Do not use parallel in combination with non-serializable loader options, such as regexes, dates and functions. These options would not be passed correctly to the respective loaders which may lead to unexpected errors.

pwa

pluginOptions

module.exports = {  
  pluginOptions: {  
    foo: {  
      // plugins can access these options as  
      // `options.pluginOptions.foo`.  
    }  
  }  
}

Babel

Babel can be configured via babel.config.js.

TIP

Vue CLI uses babel.config.js which is a new config format in Babel 7. Unlike .babelrc or the babel field in package.json, this config file does not use a file-location based resolution, and is applied consistently to any file under project root, including dependencies inside node_modules. It is recommended to always use babel.config.js instead of other formats in Vue CLI projects.

All Vue CLI apps use @vue/babel-preset-app, which includes babel-preset-env, JSX support and optimized configuration for minimal bundle size overhead. See its docs for details and preset options.

Also see the Polyfills section in guide.

ESLint

ESLint can be configured via .eslintrc or eslintConfig field in package.json.

See @vue/cli-plugin-eslint for more details.

TypeScript

TypeScript can be configured via tsconfig.json.

See @vue/cli-plugin-typescript for more details.

Unit Testing

Jest

See @vue/cli-plugin-unit-jest for more details.

Mocha (via mocha-webpack)

See @vue/cli-plugin-unit-mocha for more details.

E2E Testing

Cypress

See @vue/cli-plugin-e2e-cypress for more details.

Nightwatch

See @vue/cli-plugin-e2e-nightwatch for more details.

WebdriverIO

See @vue/cli-plugin-e2e-webdriverio for more details.