vue3.0配置gzip 及资源404

最新推荐文章于 2024-06-13 11:07:01 发布

小芬芳..

最新推荐文章于 2024-06-13 11:07:01 发布

阅读量1.5k

点赞数 1

文章标签： gzip vue-cli3

本文链接：https://blog.csdn.net/weixin_39489765/article/details/121474861

版权

第一步：vue.config.js

    plugins: [
      new CompressionPlugin({
        test:productionGzipExtensions, //匹配文件名
        threshold: 10240,//对超过10k的数据压缩
        deleteOriginalAssets: true //不删除源文件
      })
    ],

打包效果

第二步：这里使用 nginx 进行配置

这里遇到了小问题：

deleteOriginalAssets: true //不删除源文件为true时，页面加载资源呈404，需要配置nginx开启打包静态文件

nginx.conf
 

   gzip  on;
	gzip_static on; # 开启静态文件压缩
    gzip_min_length  1k; # 不压缩临界值，大于1K的才压缩
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss; # #进行压缩的文件类型
    gzip_vary on;
    gzip_proxied   expired no-cache no-store private auth;
    gzip_disable   "MSIE [1-6]\.";

开启Nginx gzip压缩非常简单，达到的效果可以压缩静态文件大小、提高页面访问速度、节省流量和带宽是很有帮助的，也为用户省去了很多流量；唯一的不足就是开启之后服务器这边会增加运算，进行压缩运算处理，就比如压缩级别，服务器cpu会有开销。

请求正常：