vuejs/vue-cli · error · Error

Configuration Error: Avoid modifying webpack output.path d

Error message

Configuration Error: Avoid modifying webpack output.path directly. Use the "outputDir" option instead.

What it means

validateWebpackConfig compares the resolved `output.path` to `api.resolve(options.outputDir)`. If a user mutated output.path directly in configureWebpack/chainWebpack, the copy plugin (and other dir-aware steps) would target the wrong folder, so the mismatch is rejected.

Source

Thrown at packages/@vue/cli-service/lib/util/validateWebpackConfig.js:17

module.exports = function validateWebpackConfig (
  webpackConfig,
  api,
  options,
  target = 'app'
) {
  const singleConfig = Array.isArray(webpackConfig)
    ? webpackConfig[0]
    : webpackConfig

  const actualTargetDir = singleConfig.output.path

  if (actualTargetDir !== api.resolve(options.outputDir)) {
    // user directly modifies output.path in configureWebpack or chainWebpack.
    // this is not supported because there's no way for us to give copy
    // plugin the correct value this way.
    throw new Error(
      `\n\nConfiguration Error: ` +
      `Avoid modifying webpack output.path directly. ` +
      `Use the "outputDir" option instead.\n`
    )
  }

  if (actualTargetDir === api.service.context) {
    throw new Error(
      `\n\nConfiguration Error: ` +
      `Do not set output directory to project root.\n`
    )
  }

  if (target === 'app' && singleConfig.output.publicPath !== options.publicPath) {
    throw new Error(
      `\n\nConfiguration Error: ` +
      `Avoid modifying webpack output.publicPath directly. ` +
      `Use the "publicPath" option instead.\n`

View on GitHub (pinned to 7eb93c169c)

Solutions

1. Use the `outputDir` option in vue.config.js to change the build output folder.
2. Remove the `config.output.path = ...` mutation from your hooks.

Example fix

// vue.config.js — before (in chainWebpack)
config.output.path = path.resolve(__dirname, 'dist2')
// after
module.exports = { outputDir: 'dist2' }

// inside your webpack hook — never set output.path; assert it stays in sync
const path = require('path')
if (config.output.path !== path.resolve(process.cwd(), options.outputDir)) {
  throw new Error('Refusing to mutate output.path; set outputDir instead')
}

When it happens

Trigger: In a webpack hook setting `config.output.path = path.resolve(__dirname, 'somewhere')` instead of using outputDir.

Common situations: Custom output dir via direct webpack mutation; copy-pasted multi-config snippets.

Related errors

• Configuration Error: Do not set output directory to projec
• Do not modify webpack output.publicPath directly. Use the "p
• Configuration Error: Avoid modifying webpack output.public
• Cannot find polyfill ${item}, please refer to 'core-js-compa
• transpileDependencies only accepts an array of string or reg

AI-assisted analysis of vuejs/vue-cli@7eb93c169c (2026-08-13). Data as JSON: /api/errors/97cdd10341ff8dd7. Report an issue: GitHub.