部屬vue項(xiàng)目,訪問(wèn)路徑設(shè)置非根,顯示白屏的解決方案

更新時(shí)間：2022年04月19日 15:12:15 作者：web張

這篇文章主要介紹了部屬vue項(xiàng)目,訪問(wèn)路徑設(shè)置非根,顯示白屏的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue訪問(wèn)路徑設(shè)置非根顯示白屏

問(wèn)題：

訪問(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)有把訪問(wèn)項(xiàng)目設(shè)置為根路徑

說(shuō)明：

當(dāng)訪問(wèn)項(xiàng)目對(duì)應(yīng)的nginx配置沒(méi)有給項(xià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配置訪問(wèn)路徑設(shè)置成根路徑，網(wǎng)站頁(yè)面可以正常訪問(wèn)，但是請(qǐng)求的返回還是會(huì)有這樣的信息，這段信息就寫(xiě)在了index.html頁(yè)面中；

分析原因是vue項(xiàng)目中會(huì)有對(duì)訪問(wèn)路徑的判斷，如果不是根路徑，就不執(zhí)行js代碼，進(jìn)而顯示白屏。

解決

vue項(xiàng)目，訪問(wèn)路徑不是根目錄，依照以下幾個(gè)步驟進(jìn)行設(shè)置，就可以正常訪問(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>

修改