一、用途
创建 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: {// 指定开发服务器的主机名，默认为 localhosthost: 'localhost',// 指定开发服务器的端口号，默认为 8080port: 8080,// 启用 HTTPS，默认为 falsehttps: false,// 配置开发服务器的代理proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: true,pathRewrite: {'^/api': ''}}}},// 配置公共路径publicPath: '/',// 是否在构建时生成 source map，默认为 falseproductionSourceMap: false,// 配置 CSScss: {// 启用 CSS modulesrequireModuleExtension: true,// 是否使用 CSS 预处理器 loaderloaderOptions: {sass: {prependData: `@import "@/styles/variables.scss";`}}},// 配置 BabeltranspileDependencies: [/* string or regex */],// 配置插件pluginOptions: {// ...},// 配置 webpackconfigureWebpack: {// ...},// 配置 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', // 指定压缩算法为gziptest: productionGzipExtensions, // 指定要压缩的文件类型threshold: 10240, // 只有文件大小大于10KB才会被压缩minRatio: 0.8 // 只有压缩率达到0.8以上的文件才会被压缩}))// 开启分离js，配置Webpack的优化选项config.optimization = {runtimeChunk: 'single', // 将runtime代码单独提取为一个chunksplitChunks: { // 配置分割代码块的规则chunks: 'all', // 选择所有类型的chunk进行优化maxInitialRequests: Infinity, // 允许的最大初始请求数，Infinity表示无限制minSize: 20000, // 每个代码块的最小大小，小于该值的模块不会被提取cacheGroups: { // 定义缓存组vendor: { // 缓存组的名称为vendortest: /[\\/]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 testconfig.plugins.delete('prefetch') // TODO: need test// 将入口文件配置为包含了 Babel polyfill 的 main.js 文件config.entry.app = ['@babel/polyfill', './src/main.js']// 设置了一个别名 @，指向项目中的 src 目录// 在代码中引用文件时就可以使用 @ 代替 srcconfig.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 URLesModule: 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: 用于处理图片资源，限制图片大小，并进行图片优化，例如压缩、转换格式等。
)
)
