找到nginx多網站配置文件：類似 nginx/sites-available/www.baidu.com

server {  listen 80;  index index.html index.htm index.nginx-debian.html;  server_name www.baidu.com;  location / {    root /mnt/www/www.baidu.com;   　　 try_files $uri $uri/ /index.html;  }}

參考頁面：https://router.vuejs.org/zh-cn/essentials/history-mode.html

cnpm run build 文件過大

　　打包生成文件：

　　瀏覽器訪問效果：

Nginx開啟gzip

　　找到nginx.config。關于gzip壓縮代碼：

http {gzip on; #開啟或關閉gzip on off gzip_disable "msie6"; #不使用gzip IE6 gzip_min_length 100k; #gzip壓縮最小文件大小，超出進行壓縮（自行調節） gzip_buffers 4 16k; #buffer 不用修改 gzip_comp_level 3; #壓縮級別:1-10，數字越大壓縮的越好，時間也越長 gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #  壓縮文件類型 gzip_vary off;  #跟Squid等緩存服務有關，on的話會在Header里增加 "Vary: Accept-Encoding"}

　　配置完重啟Nginx

　　瀏覽器訪問效果：

　　上面為數據流接收大小，下面為解壓后實際大小。

識別gzip與非gzip請求

　　gzip請求：

　　非gzip請求：

　　gzip與非gzip在響應頭中區別就是Content-Encoding是否表明是gzip壓縮格式。

　　而上面通過接收數據與實際數據大小相比也能明顯看出差異

webpack gzip

　　vue項目中config/index.js

productionGzip: true, //是否開啟gizp壓縮productionGzipExtensions: ['js', 'css'],

開啟后cnpm run build會生成*.gz文件。　　

像這樣：

　　上傳到服務器，測試查看接受文件大小。

　　gzip相應539kb。并非加載app.........gz的 412kb

　　刪除*.gz文件，依舊539kb。

　　莫非，webpack打包gzip文件毫無卵用？？？？？？

gzip_static 靜態壓縮

　　經過一番百度。得一寶貝。gzip_static

　　什么東東呢？字面上意思就是：gzip靜態。

　　賣個關子：

　　　　上面配置了。Nginx是可以開啟gzip壓縮，而且能夠實現壓縮效果。而它是如何工作的呢？

　　　　客戶端發起請求

　　　　　　-》Nginx接收請求

　　　　　　　　-》Nginx加載文件進行gzip打包壓縮成*.gz

　　　　　　　　　　-》返回給瀏覽器