Gzip 壓縮上傳 優化項目體積包的方案

針對Vue-cli Gizp 須要瞭解的事情(vue3.0如下版本不包含3.0):

一、找到對應文件 webpack.prod.conf.js;

clipboard.png

二、針對源文件(我的不建議刪除);

clipboard.png

三、打開Gzip壓縮功能

eg: productionGzip: true

clipboard.png

四、執行項目壓縮功能(默認是 npm run build ),執行完成事後效果以下:

clipboard.png

五、前端的項目已經準備好。接下來是nginx配置項:

​(1).打開nginx 配置文件 nginx.conf前端

clipboard.png

(2). 開啓gzip壓縮功能(注意:gzip_static on; 這行命令若是沒有 須要加上 )vue

clipboard.png

(3)執行保存命令(wq!)webpack

(4)重啓nginxnginx

一、先執行nginx測試web

(nginx 路徑) -t   根據本身安裝目錄執行
 lnmp 默認路徑 :  /usr/local/nginx/sbin/nginx -t

clipboard.png

二、 執行重啓命令 :npm

(nginx 路徑) -s reload    根據本身安裝目錄執行


clipboard.png

六、接下來就去瀏覽器訪問大家文件就能夠看到 (頁面沒有報錯正常執行而且控制檯以下):

clipboard.png

相關文章
相關標籤/搜索