官方文档: cli.vuejs.org/zh/config/#…
在Vue项目中，vue.config.js是一个可选的配置文件，如果项目的构建系统检测到这个文件存在，会自动使用它的配置选项。以下是一些常见的vue.config.js配置示例：
// 引入了用于压缩文件的 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: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
// 输出文件目录
outputDir: 'dist',
// 静态资源目录 (js, css, img, fonts)
assetsDir: 'assets',
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
css: {
loaderOptions: {
// 给 sass-loader 传递选项
sass: {
// 所以这里假设你有 `src/variables.scss` 这个文件
data: '@import "@/assets/css/variables.scss";'
}
}
},
// devServer 代理设置
devServer: {
host: '0.0.0.0', // 让你的服务器可以被外部访问
port: 8080, // 端口
https: false, // 不使用 HTTP 提供服务
open: true, // 打开浏览器
hot: true, // 模块热替换
headers: { // 设置请求头 'X-Custom-Header': 'value' },
compress: true, // 启用 gzip 压缩
// 配置跨域处理 可以设置你想要代理的接口
proxy: {
// 对 /api 的请求会将请求代理到http://api.example.com。
'/api': {
target: 'http://api.example.com',
changeOrigin: true, // 是否跨域
secure: false, // 不验证 SSL 证书
logLevel: 'warn', // 代理的日志级别
ws: true, // 使用 WebSockets 作为服务器
pathRewrite: {
'^/api': '' // 重写路径
}
}
}
},
before: function(app, server) {
// 在服务器启动之前执行的函数
},
after: function(app, server) {
// 在服务器启动之后执行的函数
},
contentBase: './public', // 开发服务器提供的静态文件目录 historyApiFallback: true, // 是否启用 HTML5 history API 的回退
setupMiddlewares: true, // 设置中间件
lintOnSave: false, // 是否开启eslint保存检测
// 插件选项
pluginOptions: {
// ...
},
// configureWebpack 或 chainWebpack 调整内部webpack配置
configureWebpack: config => {
// 定义一个空数组，用于存放Webpack插件
const plugins = []
// 如果是生产环境，添加以下插件配置
if (IS_PROD) {
plugins.push(
// 使用CompressionWebpackPlugin插件进行gzip压缩
new CompressionWebpackPlugin({
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 使用 Webpack Chain API，它允许你以一种声明式的方式来修改 Webpack 配置
chainWebpack: config => {
config.optimization.minimize(true); // 最小化代码
// 配置别名
config.resolve.alias
.set('@', resolve('src'))
.set('@assets', resolve('src/assets'));
// 修改模块规则
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
.use('url-loader')
.loader('url-loader')
.options({
limit: 10000,
name: 'img/[name].[hash:7].[ext]'
});
// 去除 debugger
config.when(process.env.NODE_ENV === 'production', config => {
config.optimization.minimize(true);
config.optimization.minimizer('terser').tap(args => {
args[0].terserOptions.compress.drop_debugger = true;
return args;
});
});
}
};
这个配置文件可以根据你的项目需求进行自定义配置。例如，你可以更改Webpack的配置，插入新的插件，或者更改项目的基本路径等。记得在做任何更改后重新启动你的开发服务器以使配置生效。
