blazor wasm 默認開發環境url 為, http://localhost:5000

生產環境多數情況下需要在端口后增加一個名稱, 這樣能直觀知道這個url是屬于哪個系統的. 比如 http://localhost:5000/CoolApp

url要增加這個應用名, 自然不應手工改寫所有 razor page 的url, 那樣就太麻煩了, 也不適合工程化需要. blazor wasm應用本身內置支持這一需求.

====================================

非subdirectory部署的配置

====================================

1. index.html head 下 base tag 為

    <base href="/" />

   這個base tag對于 SPA 框架都很有用, 比如 Angular 框架, 也使用 base tag.

2 服務啟動命令為,

   dotnet run --project "c:\blazorapps\demo1\demo1.csproj"

3. 瀏覽器訪問地址為 http://localhost:5000

====================================

以subdirectory部署的配置

====================================

假設應用名定為 CoolApp, 下面步驟可以將 CoolApp 加到 url中

1. index.html head 下 base tag 為

    <base href="CoolApp/" />

   用于 razor路由計算, 以及設定 blazor.webassembly.js 的訪問地址

2 服務啟動命令為,

   dotnet run --project "c:\blazorapps\demo1\demo1.csproj" --pathbase="/CoolApp"

用于控制css靜態資源的base 路徑

3. 瀏覽器訪問地址為 http://localhost:5000/CoolApp

 注意 base tag 和 瀏覽器url都是大小寫敏感的, 而啟動命令 pathbase 大小寫不敏感

====================================

同時適應本地的根目錄部署和生成環境的 subDirectory 部署形式

====================================

摘自 https://blog.elmah.io/how-to-fix-blazor-wasm-base-path-problems/

index.html 文件中, 用下面代碼替換掉原來的 <base href="/" /> , 實現原理是:

通過 js 根據瀏覽器 url動態調整 base tag.

<base />
<script>
    var path = window.location.pathname.split('/');
    var base = document.getElementsByTagName('base')[0];
    if (window.location.host.includes('localhost')) {
        base.setAttribute('href', '/');
    } else if (path.length > 2) {
        base.setAttribute('href', '/' + path[1] + '/');
    } else if (path[path.length - 1].length != 0) {
        window.location.replace(window.location.origin + window.location.pathname + '/' + window.location.search);
    }
</script>