Blazor專案在VisualStudio除錯時配置執行基礎目錄

張曉棟發表於2023-03-10

最近在使用 Blazor 開發管理後臺時遇到了如下的問題,我這裡後臺整體採用了 AntDesignBlazor 元件庫,在上線之後發現ReuseTabs元件在使用過程中,如果預設 / 沒有指定為專案的base href,開啟標籤頁後,相互切換會導致url錯誤。

本地開發的時候專案是直接啟動執行的,所以訪問目錄為 https://localhost:port/ ,Blazor 的 base 值也是預設的 / 。

但是當專案實際上線釋出的時候,我將 Blazor的專案部署到了一個域名的子目錄下。如 https://domain.com/consoul/ ,也就是部署在了網站的 consoul 目錄中,在實際執行時就發現了上面的問題。

專案上線時因為是掛在一個域名的子路徑下,所以調整了 base href 為 /consoul/ 然後在執行時 tab page 都可以開啟,但是切換時 url 會丟失 base href 的值,導致 404


這是當時提交的 issues
https://github.com/ant-design-blazor/ant-design-blazor/issues/2860

在解決這個問題的過程中,因為這個問題在本地開發是不會暴露產生的,因為我們本地專案預設執行的時候並沒有配置二級目錄,啟動的時候直接是 https://localhost:port/ 這樣的形式,標籤頁直接調轉的時候因為沒有二級目錄的存在,專案直接執行與根目錄下則也不存在問題,不好除錯,為了模擬出類似線上二級目錄的環境,在經過一番折騰之後找到了如下的方法。

選中我們的 Blazor 專案右擊屬性,然後在左側找到 除錯-常規 ,點選開啟除錯啟動配置檔案UI

然後在命令列引數中輸入,--pathbase=/consoul

然後找到 Blazor 專案的 index.html 檔案同時調整 <base href="/consoul/" />

儲存更改之後直接 Ctrl + F5 啟動專案,即可看到類似如下的介面

因為我們調整了網頁專案的執行基礎目錄所以此時 https://localhost:port/ 的根目錄下已經沒有頁面了,提示我們需要訪問 /consoul

可以看到我們本地的專案已經和線上一樣可以執行在 /consoul/ 子目錄中了。

然後就可以模擬線上的執行情況進行除錯了,該 bug 目前已修復,
https://github.com/ant-design-blazor/ant-design-blazor/pull/3142
https://github.com/ant-design-blazor/ant-design-blazor/pull/3153

至此關於 Blazor專案在VisualStudio除錯時配置執行基礎目錄 就講解完了,有任何不明白的,可以在文章下面評論或者私信我,歡迎大家積極的討論交流,有興趣的朋友可以關注我目前在維護的一個 .NET 基礎框架專案,專案地址如下
https://github.com/berkerdong/NetEngine.git
https://gitee.com/berkerdong/NetEngine.git

相關文章