一、背景

Vue-cli3.0是Vue.js官方推出的一套脚手架工具，旨在帮助开发者更快速地开始构建Vue项目。而其中的Config配置是一个重要的部分，可以帮助开发者根据自己的需求进行定制化配置。本文将对Vue-cli3.0的Config配置进行详细解读，并给出一些常用的配置案例。

二、配置文件

在Vue-cli3.0项目的根目录下，可以找到一个名为vue.config.js的文件。这个文件就是我们的配置文件，通过对这个文件的配置，我们可以对Vue项目的构建、打包等过程进行自定义。

三、常用配置项

1. publicPath

publicPath配置项用于指定项目的公共路径，也就是打包后html文件中引用静态资源的路径。在开发过程中，我们可能会将静态资源放置于不同的路径下，通过配置publicPath可以指定这些路径。例如，我们将静态资源放在CDN上：

module.exports = {
  publicPath: 'https://cdn.example.com/',
};

2. outputDir

outputDir配置项用于指定项目打包后的输出目录，默认为dist。通过配置outputDir可以指定打包后的文件保存的位置。例如，我们希望将打包后的文件保存在根目录下的build文件夹中：

module.exports = {
  outputDir: 'build',
};

3. devServer

devServer配置项用于指定开发服务器的配置。通过配置devServer可以设置本地开发的一些参数，例如设置代理、自动打开浏览器等。例如，我们希望开发过程中自动打开浏览器并且设置代理：

module.exports = {
  devServer: {
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        ws: true,
        changeOrigin: true,
      },
    },
  },
};

4. configureWebpack

configureWebpack配置项用于自定义webpack配置。通过配置configureWebpack可以对webpack进行更细粒度的控制。例如，我们希望引入一个全局的变量：

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        BASE_URL: JSON.stringify('https://api.example.com'),
      }),
    ],
  },
};

5. chainWebpack

chainWebpack配置项用于通过链式调用的方式修改webpack配置。与configureWebpack不同，chainWebpack对webpack配置的修改更加灵活。例如，我们希望在打包时将所有的console语句去除：

module.exports = {
  chainWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer('terser').tap((args) => {
        args[0].terserOptions.compress.drop_console = true;
        return args;
      });
    }
  },
};

四、总结

以上就是Vue-cli3.0 Config配置的一些常用配置项，通过对这些配置进行灵活的设置，我们可以更好地定制化我们的Vue项目。当然，除了上述的配置项外，Vue-cli3.0还提供了更多的配置选项，可以根据官方文档进行进一步的了解和使用。

希望本文能够帮助到您，祝您使用Vue-cli3.0构建出优秀的Vue项目！

本文来自极简博客，作者：幽灵船长，转载请注明原文链接：Vue-cli3.0 Config配置详解