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

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

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

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

問題：

訪問頁面，返回“We’re sorry but XXX doesn’t work properly without JavaScript enabled. Please enable it to continue.”

環(huán)境：

使用nginx部屬vue項目時，沒有把訪問項目設(shè)置為根路徑

說明：

當(dāng)訪問項目對應(yīng)的nginx配置沒有給項目的訪問路徑設(shè)置為根時，頁面顯示白屏，在network中可以看到所有資源都加載完成，

index.html會顯示

“We’re sorry but XXX doesn’t work properly without JavaScript enabled. Please enable it to continue.”信息；

如果將項目的nginx配置訪問路徑設(shè)置成根路徑，網(wǎng)站頁面可以正常訪問，但是請求的返回還是會有這樣的信息，這段信息就寫在了index.html頁面中；

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

解決

vue項目，訪問路徑不是根目錄，依照以下幾個步驟進(jìn)行設(shè)置，就可以正常訪問

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>

修改