一、用途
创建 Vue 项目时，默认情况下是没有 vue.config.js 文件的。Vue CLI 会提供一组默认的配置，用于构建和开发项目，这些配置在内部被封装好了，并不需要用户手动创建 vue.config.js 文件来进行配置。通过在项目根目录下创建 vue.config.js 文件，你可以自定义 Vue CLI 的默认配置，从而满足项目特定的需求。
一些常见的用途包括：
1、自定义 webpack 配置：
- 可以通过 vue.config.js 文件来修改 Vue CLI 默认的 webpack 配置，例如添加额外的 loader 或 plugin、调整 webpack 的 entry、output 等选项。
2、配置开发服务器：
- 在 vue.config.js 中配置开发服务器的选项，例如端口号、代理设置、HTTPS 配置等。
3、配置公共资源路径：
- 可以指定构建后静态资源的公共路径，比如部署到子路径或 CDN 上时的路径设置。
4、配置环境变量：
- 可以在 vue.config.js 中设置环境变量，用于在项目中访问和区分不同的环境，比如开发环境、测试环境和生产环境。
5、配置插件：
- 可以配置 Vue CLI 插件，通过在 vue.config.js 文件中进行相应的设置和调整。
6、配置CSS：
- 可以配置 CSS 相关的选项，例如启用 CSS modules、使用 PostCSS 插件等。
7、配置Babel：
- 可以配置 Babel 相关的选项，例如添加额外的 Babel 插件或预设。
二、常见的配置项及其功能说明
module.exports = {
// 配置开发服务器
devServer: {
// 指定开发服务器的主机名，默认为 localhost
host: 'localhost',
// 指定开发服务器的端口号，默认为 8080
port: 8080,
// 启用 HTTPS，默认为 false
https: false,
// 配置开发服务器的代理
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
},
// 配置公共路径
publicPath: '/',
// 是否在构建时生成 source map，默认为 false
productionSourceMap: false,
// 配置 CSS
css: {
// 启用 CSS modules
requireModuleExtension: true,
// 是否使用 CSS 预处理器 loader
loaderOptions: {
sass: {
prependData: `@import "@/styles/variables.scss";`
}
}
},
// 配置 Babel
transpileDependencies: [
/* string or regex */
],
// 配置插件
pluginOptions: {
// ...
},
// 配置 webpack
configureWebpack: {
// ...
},
// 配置 Webpack Dev Server 的选项
devServer: {
// ...
}
};
三、实践案例
'use strict'
const path = require('path')
// 辅助函数 resolve，它接受一个路径参数 dir，并返回该路径相对于当前文件所在目录的绝对路径
function resolve (dir) {
return path.join(__dirname, dir)
}
// 引入了用于压缩文件的 webpack 插件 compression-webpack-plugin，它能够在打包时对文件进行 gzip 压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 定义了一个变量 IS_PROD，它根据当前环境变量 NODE_ENV 的值来判断是否为生产环境
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
// 正则表达式，用于匹配需要进行 gzip 压缩的文件类型
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
// 导出了整个配置对象，使其可以被 webpack 使用
module.exports = {
publicPath: './',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
css: {
loaderOptions: {
// 给 sass-loader 传递选项
sass: {
// 所以这里假设你有 `src/variables.scss` 这个文件
data: '@import "@/assets/css/variables.scss";'
}
}
},
configureWebpack: config => {
// 定义一个空数组，用于存放Webpack插件
const plugins = []
// 如果是生产环境，添加以下插件配置
if (IS_PROD) {
plugins.push(
new CompressionWebpackPlugin({ // 使用CompressionWebpackPlugin插件进行gzip压缩
filename: '[path].gz[query]', // 指定压缩后文件的名称格式
algorithm: 'gzip', // 指定压缩算法为gzip
test: productionGzipExtensions, // 指定要压缩的文件类型
threshold: 10240, // 只有文件大小大于10KB才会被压缩
minRatio: 0.8 // 只有压缩率达到0.8以上的文件才会被压缩
})
)
// 开启分离js，配置Webpack的优化选项
config.optimization = {
runtimeChunk: 'single', // 将runtime代码单独提取为一个chunk
splitChunks: { // 配置分割代码块的规则
chunks: 'all', // 选择所有类型的chunk进行优化
maxInitialRequests: Infinity, // 允许的最大初始请求数，Infinity表示无限制
minSize: 20000, // 每个代码块的最小大小，小于该值的模块不会被提取
cacheGroups: { // 定义缓存组
vendor: { // 缓存组的名称为vendor
test: /[\\/]node_modules[\\/]/, // 匹配条件，node_modules目录下的模块
name (module) { // 模块名称的生成规则
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1] // 获取模块名称
return `npm.${packageName.replace('@', '')}` // 返回以npm.开头的模块名称，@符号替换为空字符串
}
}
}
}
};
}
// 将定义的插件数组合并到Webpack配置中的插件数组中
config.plugins = [...config.plugins, ...plugins];
},
chainWebpack (config) {
// 删除 webpack 中的预加载和预获取资源的插件
// 这些插件通常会在项目中引入一些未使用的资源，对于一些性能要求较高的项目，可能希望移除这些插件以减少无用资源的加载。
config.plugins.delete('preload') // TODO: need test
config.plugins.delete('prefetch') // TODO: need test
// 将入口文件配置为包含了 Babel polyfill 的 main.js 文件
config.entry.app = ['@babel/polyfill', './src/main.js']
// 设置了一个别名 @，指向项目中的 src 目录
// 在代码中引用文件时就可以使用 @ 代替 src
config.resolve.alias
.set('@', resolve('src'))
.end()
// 如果是开发环境，则调用 config.devtool('cheap-source-map') 方法来配置 devtool 选项，以生成方便调试的源映射文件
config
.when(process.env.NODE_ENV === 'development',
config => config.devtool('cheap-source-map')
)
// 图片处理规则
config.module
.rule('images')
.test(/\.(woff2?|eot|ttf|otf|png|jpe?g|gif|svg)(\?.*)?$/) // 匹配图片文件的文件名后缀
.use('url-loader') // 使用 url-loader 加载器处理图片文件
.loader('url-loader')
.options({
limit: 80000, // 小于 80000 字节的图片转换为 base64 编码的 Data URL
esModule: false // 禁用 ES 模块语法
})
if (IS_PROD) {
config.module
.rule('images')
.test(/\.(woff2?|eot|ttf|otf|png|jpe?g|gif|svg)(\?.*)?$/)
.use('image-webpack-loader') // 用于优化图片文件
.loader('image-webpack-loader')
.options({
mozjpeg: { progressive: true, quality: 65 },
optipng: { enabled: false },
pngquant: { quality: [0.65, 0.9], speed: 4 },
gifsicle: { interlaced: false }
})
}
}
}
以上代码的主要作用是根据环境判断是否为生产环境，如果是则添加对应的插件配置和优化选项。其中，主要的插件是 CompressionWebpackPlugin，用于对资源文件进行 gzip 压缩，在生产环境中提高加载速度。同时，通过配置 splitChunks 选项，将第三方库和公共模块分离到单独的文件中，以优化浏览器缓存机制，提高页面加载速度。
附：
其中一些关键配置项解析
publicPath: 指定项目的基本 URL 路径，通常用于将静态资源部署到 CDN 上时使用。在这个配置中，‘./’ 表示相对路径。outputDir: 指定打包后的文件输出目录。assetsDir: 指定放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。productionSourceMap: 是否在生产环境下生成 source map 文件，方便调试，默认为 false。css.loaderOptions: 用于向 CSS 相关的 loader 传递选项。在这里使用 sass-loader 加载器，引入了一个变量文件。configureWebpack: 用于修改 webpack 的配置，在这里添加了一些插件，比如压缩插件 CompressionWebpackPlugin，根据环境变量决定是否启用压缩。chainWebpack: 通过 webpack-chain 的 API 修改 webpack 配置，包括修改入口文件、配置别名、删除预加载和预取等操作。url-loader和image-webpack-loader: 用于处理图片资源，限制图片大小，并进行图片优化，例如压缩、转换格式等。
