Masa Blazor Pro项目快速入门

最新推荐文章于 2025-07-11 08:01:34 发布

原创最新推荐文章于 2025-07-11 08:01:34 发布 · 505 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html #vue.js #css

MasaBlazorPro是一个适用于后台管理项目的Blazor前端模板框架。文章介绍了如何安装和创建项目，以及处理Brotli压缩问题，包括替换decode.mini.js，调整Blazor.start()的调用，解决开发模式下的加载问题，和在开发期间禁用压缩及AOT编译以提升效率。

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>