vue3 + vite + linux + nginx 配置gzip模式

1、vue3 + vite配置gzip

安装vite-plugin-compression

npm install vite-plugin-compression -D

配置vite.config.js

export default defineConfig({
  // compressPlugin开启gzip压缩
  plugins: [vue(), compressPlugin({
    ext: ".gz",
    deleteOriginFile: false // 是否删除原始文件
  })],
})

2、打包

npm run build

3、服务器linux配置nginx

http{}下配置：

gzip on;
#不压缩临界值，大于1K的才压缩，一般不用改
gzip_min_length 1k;
#buffer，就是，嗯，算了不解释了，不用改
gzip_buffers 4 16k;
#用了反向代理的话，末端通信是HTTP/1.0,默认是HTTP/1.1
#gzip_http_version 1.0;
#压缩级别，1-10，数字越大压缩的越好，时间也越长，看心情随便改吧
gzip_comp_level 2;
#进行压缩的文件类型，缺啥补啥就行了，JavaScript有两种写法，最好都写上吧，总有人抱怨js文件没有压缩，其实多写一种格式application/javascript 就行了
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
#跟Squid等缓存服务有关，on的话会在Header里增加"Vary: Accept-Encoding"
gzip_vary off;
#IE6对Gzip不怎么友好，不给它Gzip了
gzip_disable "MSIE [1-6]\.";

4、安装nginx ngx_http_gzip_module模块

./configure --prefix=/usr/local/nginx --with-http_gzip_static_module

安装

make

此时不要mask install 将 objs下面nginx执行文件， 拷贝到/user/local/nginx/sbin/下面替换点ngnix
到这里就已经完成了gzip的配置。
下面可以继续配置静态压缩

5、配置nginx静态压缩

静态压缩：当已经有gz压缩文件时，不再对源文件进行压缩生成gz。减小服务器压力。

找到/usr/local/nginx/conf/nginx.conf，并添加下面代码

server {
	listen 8080;     #1.你想让你的这个项目跑在哪个端口
    server_name 120.48.9.40;     #2.当前服务器ip
    location / {
       root   /usr/web/myBlog/dist/;     #3.dist文件的位置(根据自己dist包放置的位置决定) 
       try_files $uri $uri/ /index.html;     #4.重定向,内部文件的指向(照写，history和bash通用，这里配置主要是兼容history模式，进行一个404的重定向)
        gzip_static on; #静态压缩
    }
}

重启nginx

nginx -s reload

这时候，可能会因为替换完刚才的nginx执行文件，导致执行nginx命令的时候没有权限，会报这个错误：-bash: ./nginx: Permission denied问题这时候进行以下操作：

1、chmod +x nginx，给该文件增加权限
2、./nginx -t -c /usr/local/nginx/nginx.conf  //  你nginx.conf配置文件的位置
3、启动ngnix ./ngnix
4、如果ngnix.conf有改动在执行./nginx -s reload命令即可

6、查看是否配置成功

访问页面查看