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、查看是否配置成功

vue3 + vite + linux + nginx 配置gzip模式_第1张图片
访问页面查看
vue3 + vite + linux + nginx 配置gzip模式_第2张图片
vue3 + vite + linux + nginx 配置gzip模式_第3张图片

你可能感兴趣的:(vue.js,linux,nginx)