Nginx配置出現(xiàn)訪問白屏問題的原因與解決
問題復(fù)顯
當(dāng)跳轉(zhuǎn) http://xxxxx/your/path
時(shí) 顯示白屏
但正常訪問http://xxxxx
路徑顯示正常
由于vue開發(fā)的為spa應(yīng)用。打包后一個(gè)dist文件
- dist
- css文件
- html文件
- static文件夾
后在nginx會(huì)進(jìn)行一次配置
server { listen 80; location /apiset/ { //接口請(qǐng)求 proxy_pass http://x x x x:3000/apiset/; proxy_set_header Host $host:$server_port; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } location / { root /your/html/path; try_files $uri $uri/ /index.html; add_header Cache-Control "no-cache, no-store, must-revalidate"; add_header Pragma "no-cache"; add_header Expires 0; ; } }
問題原因
當(dāng)訪問http://xxxxx/your/path
時(shí)返回一個(gè)html文件,在根據(jù)內(nèi)部的link,script標(biāo)簽進(jìn)行對(duì)css js的訪問,問題出在這塊
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="icon" href="./static/favicon.ico" rel="external nofollow" /> <link rel="stylesheet" href="./static/app-loading.css" rel="external nofollow" /> <title>xxxx</title> </head> <body> <div id="app"> <div id="app-loading"></div> </div> </body> </html>
此時(shí)html上面訪問的css路徑為相對(duì)路徑,在vite配置內(nèi)部是base屬性,base屬性為‘’
當(dāng)訪問的路徑為 http://xxxxx/your/path
<link rel="icon" href="./static/favicon.ico" />
解讀為
<link rel="icon" href="http://xxxxx/your/static/favicon.ico" />
因?yàn)榇虬Y(jié)構(gòu)不存在‘your’這個(gè)文件夾導(dǎo)致找不到文件觸發(fā) try_files uriuri uriuri/ /index.html 規(guī)則把應(yīng)該獲取css/js文件變?yōu)榉祷豩tml文件導(dǎo)致白屏問題。
解決
將內(nèi)部相對(duì)路徑修改為絕對(duì)路徑,或者nginx配置重寫
vite export default (_configEnv: ConfigEnv): UserConfigExport => { return { base: "/", 。。。 } }
或
nginx
server { listen 80; location /apiset/ { //接口請(qǐng)求 proxy_pass http://x x x x:3000/apiset/; proxy_set_header Host $host:$server_port; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } location / { root /your/html/path; try_files $uri $uri/ /index.html; add_header Cache-Control "no-cache, no-store, must-revalidate"; add_header Pragma "no-cache"; add_header Expires 0; rewrite ^/your/(.*)$ /$1 break; //重寫your路徑 } }
到此這篇關(guān)于Nginx配置出現(xiàn)訪問白屏問題的原因與解決的文章就介紹到這了,更多相關(guān)Nginx配置訪問白屏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
nginx中使用nginx-http-concat模塊合并靜態(tài)資源文件
這篇文章主要介紹了nginx中使用nginx-http-concat模塊合并靜態(tài)資源文件,用以加速網(wǎng)站的CSS、JS等靜態(tài)資源載入速度,需要的朋友可以參考下2014-06-06使用Nginx搭建圖片服務(wù)器(windows環(huán)境下)
這篇文章主要介紹了使用Nginx搭建圖片服務(wù)器(windows環(huán)境下),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06nginx限速配置的三種方法(limit_req、limit_conn、limit_rate)
本文主要介紹了nginx限速配置的三種方法,主要包括limit_req、limit_conn、limit_rate,本文就詳細(xì)的介紹一下如何使用,感興趣的可以了解一下2023-08-08Linux下Tomcat+Nginx服務(wù)器環(huán)境安裝配置的簡(jiǎn)明教程
以Nginx作為反向代理再用Tomcat驅(qū)動(dòng)Java Web程序是當(dāng)今很流行的一種方案,那么這里我們就著眼于最基本的生產(chǎn)環(huán)境搭建,一起來看一下Linux下Tomcat+Nginx服務(wù)器環(huán)境安裝配置的簡(jiǎn)明教程2016-05-05nginx并發(fā)數(shù)限制limit_conn基本語法
這篇文章主要為大家介紹了nginx并發(fā)數(shù)限制limit_conn基本語法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04Nginx隱藏server頭信息的實(shí)現(xiàn)
本文主要介紹了Nginx隱藏server頭信息的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01