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 实现类似淘宝星级评分的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
Vue的小伙伴们,困扰大家的IE浏览器支持Vue的问题,目前已经找到了一个比较好的解决方案,下面这篇文章主要给大家介绍了关于vue项目兼容IE浏览器的教程步骤,需要的朋友可以参考下2023-03-03
本文给大家介绍vue多层弹框时存在遮挡问题，解决思路首先想到的是找到对应的遮挡层的css标签，然后修改z-index值，但是本思路只能解决首次问题，再次打开还会存在相同的问题，故该思路错误，下面给大家带来一种正确的思路，一起看看吧2022-03-03
这篇文章主要介绍的是深入理解Vue的插件机制与install，文章主要是讲解install函数可以做些什么、install内部是怎么实现的、 Vuex，Vue-Router插件在install期间到底干了什么,需要的小伙伴可以参考一下2021-09-09
这篇文章主要给大家介绍了关于vue中常见的问题及解决方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了vue中动态控制btn的disabled属性方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue3基于rem比例缩放方案,本缩放方案置于hooks中即可，文中通过示例代码介绍了vue-cli3 中使用rem布局的方法，需要的朋友可以参考下2023-05-05
这篇文章主要介绍了如何在 ant 的table中实现图片的渲染操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了vue中如何实现拖拽调整顺序功能问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了vue3中如何获取proxy包裹的数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
最新评论