Vue項(xiàng)目引入了d3.js第步，在打包部署到nginx靜態(tài)服務(wù)后校焦，頁(yè)面不能正常展示俏脊，F12打開(kāi)控制臺(tái)茸俭，發(fā)現(xiàn)報(bào)了幾個(gè)net::ERR_CONTENT_LENGTH_MISMATCH 206 (Partial Content)錯(cuò)誤吊履。第一次遇到Status Code為206的問(wèn)題，所以本文記錄一下调鬓。
Nginx 206 (Partial Content)
原因
- 項(xiàng)目打包后有些文件比較大艇炎，例如這里的
d3.min.js有140kb，還有chunk-vendors.js文件有1.2Mb腾窝。 - 使用
Nginx部署靜態(tài)文件缀踪，配置了反向代理服務(wù)居砖，而代理服務(wù)器的響應(yīng)內(nèi)容緩存區(qū)默認(rèn)比較小，導(dǎo)致部分文件出現(xiàn)加載不全的問(wèn)題驴娃。
解決方案
- 增加
緩存大小 - 增加nginx的
代理緩存區(qū)
在nginx.conf中http里面加入三行配置奏候，如下：
#user nobody;
worker_processes 1;
events {
worker_connections 1024;
}
http {
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
# 增加配置 start
proxy_buffer_size 128k;
proxy_buffers 32 128k;
proxy_busy_buffers_size 128k;
# 增加配置 end
#gzip on;
server {
# ...
# ...
}
# ...
}
- 保存成功后，重啟
Nginx：
nginx -t
nginx -s reload
再次刷新頁(yè)面發(fā)現(xiàn)頁(yè)面可以正常展示了唇敞，沒(méi)有了206的錯(cuò)誤蔗草，問(wèn)題解決。
耐思_
《Nginx學(xué)習(xí)與實(shí)戰(zhàn)》系列
- Nginx學(xué)習(xí)與實(shí)戰(zhàn) · 配置HTTP2
- Nginx學(xué)習(xí)與實(shí)戰(zhàn) · 解決net::ERR_CONTENT_LENGTH_MISMATCH 206問(wèn)題（本文）
歡迎訪問(wèn)：天問(wèn)博客
