Vue3启用gzip压缩nginx配置详解
作者：south
这篇文章主要为大家介绍了Vue3启用gzip压缩时nginx配置gzip示例详解详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
Vue CLI3中启用gzip压缩
要在Vue CLI3中启用gzip压缩，可以使用compression-webpack-plugin插件。
1. 安装插件：compression-webpack-plugin
在终端中运行以下命令安装compression-webpack-plugin插件：
npm install --save-dev compression-webpack-plugin
2. 修改配置：vue.config.js
在vue.config.js文件中添加以下代码：
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new CompressionPlugin({
algorithm: 'gzip', // 使用gzip压缩
test: /\.js$|\.html$|\.mp4$|\.*$|\.css$/, // 匹配文件名
filename: '[path][base].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)
minRatio: 1, // 压缩率小于1才会压缩
threshold: 10240, // 对超过10k的数据压缩
deleteOriginalAssets: false, // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
})
]
}
}这将在webpack配置中添加compression-webpack-plugin插件，并配置它以压缩.js，.html和.css文件。
3. 重新构建：重新构建Vue项目
压缩后的文件应该已经生成了。
如果构建成功，则在dist目录下应该会看到被压缩后的文件，例如app.js.gz，app.html.gz等。
编辑 Nginx 配置文件
#开启gzip压缩功能 gzip on; gzip_min_length 1024; gzip_buffers 4 16k; gzip_comp_level 2; gzip_types *; gzip_vary on;
以上就是Vue3启用gzip压缩nginx配置详解的详细内容，更多关于Vue3 gzip压缩nginx配置的资料请关注脚本之家其它相关文章！