Nginx配置出現(xiàn)訪問白屏問題的原因與解決

更新時(shí)間：2025年02月18日 09:18:15 作者：真夜

這篇文章主要為大家詳細(xì)介紹了Nginx配置出現(xiàn)訪問白屏問題的原因以及該如何解決,文中的示例代碼簡(jiǎ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

解讀為

因?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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: