Vue 项目中的 vue.config.js：从基础到高级的全面解析

提示：记录工作中遇到的需求及解决办法

---

前言

在 Vue.js 项目开发中，vue.config.js 文件是项目的核心配置文件，它位于 Vue CLI 项目的根目录下，用于对项目的构建、开发服务器、插件等进行高度自定义设置。通过合理配置 vue.config.js，可以优化项目构建过程、调整开发体验、以及增加项目的灵活性。本文将详细介绍 vue.config.js 的配置项，并通过丰富的代码示例展示如何使用这些配置来优化你的 Vue 项目。

---

一、基础配置

1.1 公共路径（publicPath）

publicPath 用于指定项目的公共路径，即项目部署到服务器后的基础路径。在开发环境中，通常设置为 ‘/’，而在生产环境中，可以根据项目的实际部署路径进行设置。

module.exports = {
     
	publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/'
};

1.2 输出目录（outputDir）

outputDir 用于指定项目构建后的输出目录，默认值为 ‘dist’。

module.exports = {
     
	outputDir: 'dist'
};

1.3 静态资源目录（assetsDir）

assetsDir 用于指定项目中静态资源（如图片、字体等）的目录，默认值为 ‘static’。

module.exports = {
     
	assetsDir: 'static'
};

1.4 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码（lintOnSave）

module.exports = {
     
	lintOnSave: false
};

1.5 是否使用包含运行时编译器的 Vue 构建版本（runtimeCompiler）

module.exports = {
     
	runtimeCompiler: true
};

1.6 生产环境的 source map（productionSourceMap）

module.exports = {
     
	productionSourceMap: false
};

二、高级配置

2.1 自定义 Webpack 配置（configureWebpack）

通过 configureWebpack，可以对 Webpack 的配置进行自定义，例如添加插件、修改模块规则等。

const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = {
   
  configureWebpack: {
   
    plugins: [
      new CompressionWebpackPlugin({
   
        algorithm: 'gzip',
        test: /\.js$|\.html$|\.css$/,
        threshold: 10240,
        minRatio: 0.8
      })
    ]
  }
};

2.2 链式操作 Webpack 配置（chainWebpack）

chainWebpack 提供了一种更灵活的方式来修改 Webpack 配置，通过链式操作可以更方便地添加、修改或删除配置项。

module.exports