Vue3启用gzip压缩nginx配置详解
更新时间：2023年08月31日 11:18:22 作者：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配置的资料请关注脚本之家其它相关文章！
相关文章
文章详细分析了Vue项目中静态资源路径失效的问题,包括开发、构建、部署等阶段的常见原因,并提供了多种解决方案,旨在帮助开发者系统性地解决静态资源路径问题,构建稳定可靠的前端应用,需要的朋友可以参考下2025-03-03
这篇文章主要介绍了Vue中android4.4不兼容问题的解决方法,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了详解vue axios用post提交的数据格式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
近来发现Echarts API越发的强大，对于绘制各类图形可以使用Echarts实现。本文将利用Echarts实现分时图和交易量图的绘制，希望对大家有所帮助2023-03-03
这篇文章主要介绍了Vue实现数值型输入框并限制长度，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要为大家详细介绍了vue通过数据过滤实现表格合并，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
在本文里小编给大家分享了一篇关于vue中实现上传文件给后台的实例内容，有需要此功能的可以学习参考下。2019-08-08
这篇文章主要介绍了详解Vue CLI3配置解析之css.extract,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue3中的模板语法和vue指令,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
这篇文章主要为大家详细介绍了vue实现树形表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最新评论