Vue gzip压缩以及版本不同引起的报错

本文详细介绍如何使用compression-webpack-plugin插件对Webpack构建的项目进行文件压缩,包括安装插件、配置参数、运行构建等步骤,帮助提升网站加载速度。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.先下载

运行 npm install --save-dev compression-webpack-plugin

2.修改config/index.js

将productionGzip改成true
在这里插入图片描述

3.查看或修改webpack.prod.conf.js的配置

可以使用默认配置,也可自行去1.x版本查看配置进行修改

在这里插入图片描述

4.运行npm run build

如果dist里面有.gz文件即为压缩成功

5.版本问题

compression-webpack-plugin 存在使用版本不同引起的报错,如果使用的是版本1.x,建议使用上方图片的配置,如果使用的是版本2.x, 点击此链接去进行相关配置,或者使用下方的配置

const CompressionWebpackPlugin = require('compression-webpack-plugin')
  module.exports = {
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        test: /(\.js(\?.*)?)|(\.html(\?.*)?)|(\.css(\?.*)?)$/i,
        algorithm: 'gzip',
        cache:true,
        threshold: 10240,
        minRatio: 0.8,
      })
    ]
  }
当你遇到 `gzip` 压缩导致 Vue 应用返回 404 错误的问题时,这通常是因为服务器配置不当引起的。为了帮助你理解并解决这个问题,我们将一步步分析原因及其解决方案。 ### 可能的原因 1. **服务器未正确处理静态资源**:如果你的 Web 服务器(如 Nginx、Apache 等)没有针对 `.gz` 文件设置正确的 MIME 类型或路径映射规则,则浏览器请求经过 Gzip 压缩后的文件可能会找不到对应的资源而返回 404。 2. **构建工具生成了错误的压缩文件名**:如果打包过程中出错,例如通过某些插件(像 `compression-webpack-plugin` 或者其他自定义脚本),可能导致最终部署到生产环境里的 .html/.js/css 文件与其对应压缩版本之间的链接断裂。 3. **缓存问题**:有时候旧版已缓存在客户端或者CDN上,在更新项目后如果没有清除干净的话也可能引发此类情况发生。 ### 解决方案 #### 对于使用 Nginx 的用户: 检查你的 nginx.conf 配置是否包含如下内容,并确保它位于合适的上下文中(server block 内部)。此段落告诉 Nginx 怎样去查找预压缩过的 .gz 文件并向支持它的客户机提供它们;如果不匹配则回退至未经压缩的形式发送给对方。 ```nginx # 尝试以.gz结尾的变体首先服务; 如果不存在这样的东西就回到原始的那个. gzip_static on; location / { try_files $uri $uri/ /index.html; } ``` #### 对于 Apache 用户来说, 需要确认已经启用了 mod_deflate 模块并且在 .htaccess 中添加适当的指令来允许对特定类型的响应启用压缩传输编码: ```apacheconf <IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml </IfModule> <Filesmatch "\.(css|gif|htm|html|ico|jpg|js|pdf" SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary </Filesmatch> ``` 对于那些非标准端口访问的应用程序,请记得还要调整防火墙策略使之开放相应范围内的连接请求权限。 最后别忘了重启 web server 让更改生效! 另外建议开发者们可以在本地环境中模拟线上场景测试一遍整个流程是否有类似报错现象出现,以此排除因为网络延迟或者其他第三方因素造成的误导干扰结论得出过程。 --
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值