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

このときマスクインストールはせず、objs以下の実行ファイルを以下の置換先ngnixにコピーし、ここでgzipの設定は完了です。以下で引き続き静的圧縮を構成できます。nginx/user/local/nginx/sbin/

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. 設定が成功したかどうかを確認します

ここに画像の説明を挿入
ページにアクセスしてご覧ください