部屬vue項(xiàng)目,訪(fǎng)問(wèn)路徑設(shè)置非根,顯示白屏的解決方案
vue訪(fǎng)問(wèn)路徑設(shè)置非根顯示白屏
問(wèn)題:
訪(fǎng)問(wèn)頁(yè)面,返回“We’re sorry but XXX doesn’t work properly without JavaScript enabled. Please enable it to continue.”
環(huán)境:
使用nginx部屬vue項(xiàng)目時(shí),沒(méi)有把訪(fǎng)問(wèn)項(xiàng)目設(shè)置為根路徑
說(shuō)明:
當(dāng)訪(fǎng)問(wèn)項(xiàng)目對(duì)應(yīng)的nginx配置沒(méi)有給項(xiàng)目的訪(fǎng)問(wèn)路徑設(shè)置為根時(shí),頁(yè)面顯示白屏,在network中可以看到所有資源都加載完成,
index.html會(huì)顯示
“We’re sorry but XXX doesn’t work properly without JavaScript enabled. Please enable it to continue.”信息;
如果將項(xiàng)目的nginx配置訪(fǎng)問(wèn)路徑設(shè)置成根路徑,網(wǎng)站頁(yè)面可以正常訪(fǎng)問(wèn),但是請(qǐng)求的返回還是會(huì)有這樣的信息,這段信息就寫(xiě)在了index.html頁(yè)面中;
分析原因是vue項(xiàng)目中會(huì)有對(duì)訪(fǎng)問(wèn)路徑的判斷,如果不是根路徑,就不執(zhí)行js代碼,進(jìn)而顯示白屏。
解決
vue項(xiàng)目,訪(fǎng)問(wèn)路徑不是根目錄,依照以下幾個(gè)步驟進(jìn)行設(shè)置,就可以正常訪(fǎng)問(wèn)
1.修改vue.config.js,設(shè)置pbulicPath路徑
2.設(shè)置路由中的base信息
3.修改nginx,在serve中設(shè)置location /webroot
vue部署到非根目錄設(shè)置
假設(shè)部署到根目錄下app文件夾里
需要修改三處配置
1.config => index.js
? ?// Paths ? ? assetsRoot: path.resolve(__dirname, "../dist"), ? ? assetsSubDirectory: "static", ? ? assetsPublicPath: "/app/", //修改打包后路徑 ?修改這里
把 assetsPublicPath: "/", 修改成 assetsPublicPath: "/app/",
2.router => index.js
const router = new Router({ ? mode: "history", ? // base: getAbsolutePath(), ? base: "/app/", ? routes: [...] ......
增加基礎(chǔ)路徑 base:"/app/"
3.網(wǎng)站根目錄文件夾下修改配置文件,用的是IIS
<?xml version="1.0" encoding="UTF-8"?> <configuration> ? ? <system.webServer> ? ? ? ? <defaultDocument> ? ? ? ? ? ? <files> ? ? ? ? ? ? ? ? <clear /> ? ? ? ? ? ? ? ? <add value="zkpt.asmx" /> ? ? ? ? ? ? ? ? <add value="index.html" /> ? ? ? ? ? ? ? ? <add value="Default.htm" /> ? ? ? ? ? ? ? ? <add value="Default.asp" /> ? ? ? ? ? ? ? ? <add value="index.htm" /> ? ? ? ? ? ? ? ? <add value="iisstart.htm" /> ? ? ? ? ? ? ? ? <add value="default.aspx" /> ? ? ? ? ? ? </files> ? ? ? ? </defaultDocument> ? ? ? ? <!-- 刷新白屏增加配置start --> ?<rewrite> ? ? ? <rules> ? ? ? ? <rule name="Handle History Mode and custom 404/500" stopProcessing="true"> ? ? ? ? ? <match url="(.*)" /> ? ? ? ? ? <conditions logicalGrouping="MatchAll"> ? ? ? ? ? ? <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> ? ? ? ? ? ? <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> ? ? ? ? ? </conditions> ? ? ? ? ? <action type="Rewrite" url="/app/" /> ? ? ? ? </rule> ? ? ? </rules> ? ? </rewrite> ? ? </system.webServer> ? ? <!-- 刷新白屏增加配置end --> </configuration>
修改
<action type="Rewrite" url="/" />
為
<action type="Rewrite" url="/app/" />
這樣就可以了,親測(cè)沒(méi)有問(wèn)題。
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli 打包后提交到線(xiàn)上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報(bào)
這篇文章主要介紹了vue-cli 打包后提交到線(xiàn)上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報(bào)錯(cuò),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11vue使用pdfjs顯示PDF可復(fù)制的實(shí)現(xiàn)方法
這篇文章主要介紹了vue使用pdfjs顯示PDF可復(fù)制的實(shí)現(xiàn)方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12解決vue axios的封裝 請(qǐng)求狀態(tài)的錯(cuò)誤提示問(wèn)題
今天小編就為大家分享一篇解決vue axios的封裝 請(qǐng)求狀態(tài)的錯(cuò)誤提示問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09Vue3源碼分析組件掛載創(chuàng)建虛擬節(jié)點(diǎn)
這篇文章主要為大家介紹了Vue3源碼分析組件掛載創(chuàng)建虛擬節(jié)點(diǎn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10vue2+elementui進(jìn)行hover提示的使用
本文主要介紹了vue2+elementui進(jìn)行hover提示的使用,主要分為外部和內(nèi)部,具有一定的參考價(jià)值,感興趣的可以了解一下2021-11-11vue結(jié)合g6實(shí)現(xiàn)樹(shù)級(jí)結(jié)構(gòu)(compactBox?緊湊樹(shù))
本文主要介紹了vue結(jié)合g6實(shí)現(xiàn)樹(shù)級(jí)結(jié)構(gòu),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06