Masa Blazor Pro项目快速入门
Masa Blazor Pro 简介
是一个开箱即用的 Blazor 前端模板框架, 非常适合于做后台管理类项目, 模板设计得非常精良.
github 主页
快速入门
- 安装模板
dotnet new --install Masa.Template
- 创建wasm项目
dotnet new masabp --mode Wasm -o Project1
- 运行项目
cd Project1
dotnet run
- 替换项目中的 decode.mini.js 文件
新项目中的 decode.mini.js 文件用于在生产环境下使用 brotli 压缩以提高页面加载速度, 但Masa blazor template模板提供的 decode.mini.js 内容是不对的, 需要替换成 google 官方源码, 地址 https://github.com/google/brotli/blob/master/js/decode.min.js - 删除 index.html 对于decode.mini.js 的直接引用, 移到 Blazor.start()调用的上一行.
<script type="module">
import { BrotliDecode } from './decode.min.js'; // import 方式引入 decode js
Blazor.start({
loadBootResource: function (type, name, defaultUri, integrity) {
if (type !== 'dotnetjs' && location.hostname !== 'localhost') {
return (async function () {
const response = await fetch(defaultUri + '.br', { cache: 'no-cache' });
if (!response.ok) {
throw new Error(response.statusText);
}
const originalResponseBuffer = await response.arrayBuffer();
const originalResponseArray = new Int8Array(originalResponseBuffer);
const decompressedResponseArray = BrotliDecode(originalResponseArray);
const contentType = type ===
'dotnetwasm' ? 'application/wasm' : 'application/octet-stream';
return new Response(decompressedResponseArray,
{ headers: { 'content-type': contentType } });
})();
}
}
});
</script>
- 开发模式下: blazor.webassembly.js 需要设定为 autostart 为 true
Masa blazor template的项目已经按照微软官方说明, 对于非localhsot的网页请求自动启用的 brotli 压缩机制. 我们知道网页如要使用压缩机制, 浏览器端和服务器端都需要支持. 但对于开发环境, 比如使用VS或VS code, 服务器的blazor dev server是不支持压缩, 所以对于非localhsot的访问, 默认情况下是无法加载页面的, 可以临时关闭压缩加载模式.
<script src="_framework/blazor.webassembly.js" autostart="false" ></script>
<!--临时关闭压缩加载模式: 设定 autostart 为 true-->
<script src="_framework/blazor.webassembly.js" autostart="true" ></script>
- 将 index.razor 的url 跳转forceLoad参数调整为false
曾经遇到index.html无法直接跳转的dashboard视图, 将forceLoad参数设置为false后解决了.
protected override void OnAfterRender(bool firstRender)
{
if(firstRender)
{
//Nav.NavigateTo(GlobalVariables.DefaultRoute,true);
Nav.NavigateTo(GlobalVariables.DefaultRoute,false);
}
}
- 开发期间: 项目发布临时禁用压缩和AOT编译
压缩和AOT编译的耗时往往会很长, 所以在开发期间可以在项目project中关闭这些编译选项.
<PropertyGroup>
<RunAOTCompilation>false</RunAOTCompilation>
<BlazorEnableCompression>false</BlazorEnableCompression>
<BlazorEnableTimeZoneSupport>false</BlazorEnableTimeZoneSupport>
<BlazorWebAssemblyPreserveCollationData>false</BlazorWebAssemblyPreserveCollationData>
</PropertyGroup>
