方式一：直接写在 module.exports 中（Vue CLI 特有配置）

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: true,
  productionSourceMap: false,
  devServer: {
    port: 9528,
    proxy: { '/api': { target: 'http://localhost:3000' } }
  }
}

特点：

• 这些是 Vue CLI 特有的配置项

• 会被 Vue CLI 自动转换为 webpack 配置

• 语法简单，专门为 Vue 项目设计

方式二：configureWebpack（直接 webpack 配置）

module.exports = {
  configureWebpack: {
    name: 'My App',
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    },
    externals: {
      'vue': 'Vue'
    }
  }
}

特点：

• 直接传递对象给 webpack 配置

• 会与 Vue CLI 的默认配置合并

• 适合添加新的 webpack 配置项

方式三：chainWebpack（链式 webpack 配置）

module.exports = {
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].title = 'My App'
      return args
    })
    
    config.module
      .rule('svg')
      .exclude.add(path.resolve(__dirname, 'src/icons'))
      .end()
  }
}

特点：

• 使用 webpack-chain 的链式 API

• 可以修改现有的 webpack 配置

• 更精确的控制，可以删除、修改现有配置

三者可以混着写吗？

答案：完全可以！ 这三种方式可以同时使用，它们会按以下顺序合并：

module.exports = {
  // 方式一：Vue CLI 特有配置
  publicPath: '/',
  outputDir: 'dist',
  devServer: {
    port: 9528
  },
  
  // 方式二：直接 webpack 配置
  configureWebpack: {
    name: 'My App',
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  },
  
  // 方式三：链式 webpack 配置
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].title = 'My App'
      return args
    })
  }
}

配置合并的优先级

Vue CLI 会按以下顺序处理配置：

1. Vue CLI 默认配置
2. 直接写在 module.exports 中的配置（覆盖默认值）
3. configureWebpack 配置（合并到 webpack 配置）
4. chainWebpack 配置（修改最终的 webpack 配置）

module.exports = {
  // 方式一：Vue CLI 配置
  publicPath: '/',
  
  // 方式二：configureWebpack
  configureWebpack: {
    output: {
      publicPath: '/custom/'  // 这会覆盖上面的 publicPath
    }
  },
  
  // 方式三：chainWebpack
  chainWebpack: config => {
    config.output.publicPath('/another/')  // 这会覆盖上面的所有配置
  }
}

优先级：chainWebpack > configureWebpack > Vue CLI 配置

最佳实践建议

推荐的使用方式：

module.exports = {
  // 1. Vue CLI 特有配置（简单配置）
  publicPath: '/',
  outputDir: 'dist',
  devServer: {
    port: 9528,
    proxy: { '/api': { target: 'http://localhost:3000' } }
  },
  
  // 2. configureWebpack（添加新配置）
  configureWebpack: {
    name: 'My App',
    resolve: {
      alias: { '@': path.resolve(__dirname, 'src') }
    },
    externals: { 'vue': 'Vue' }
  },
  
  // 3. chainWebpack（修改现有配置）
  chainWebpack: config => {
    // 删除不需要的插件
    config.plugins.delete('prefetch')
    
    // 修改现有规则
    config.module.rule('svg').exclude.add(path.resolve(__dirname, 'src/icons'))
    
    // 添加新的插件
    config.plugin('my-plugin').use(MyPlugin)
  }
}

总结

1. 三种方式可以混用，Vue CLI 会按顺序合并
2. 优先级：chainWebpack > configureWebpack > Vue CLI 配置
3. 使用场景：

• Vue CLI 配置：简单的基础配置

• configureWebpack：添加新的 webpack 配置

• chainWebpack：修改现有的 webpack 配置