Blazor Server中Blazorise Live-Chart组件脚本加载失败求助

问题描述 #

在Blazor Server项目中集成Blazorise Live-Chart组件，已添加必要包和示例代码，编译发布无错误，但浏览器打开页面时，相关脚本文件出现加载错误。因服务器无网络，已将所需脚本下载到项目wwwroot/files目录，但这些无扩展名的脚本无法被识别，浏览器抛出Uncaught SyntaxError: expected expression, got '<'错误。

相关代码与错误信息 #

host.cshtml脚本引用代码 #

<script src="files/luxon"></script>
<script src="files/chartjs-adapter-luxon"></script>
<script src="files/chartjs-plugin-streaming"></script>

浏览器错误信息 #

Uncaught SyntaxError: expected expression, got '<'luxon:2
Uncaught SyntaxError: expected expression, got '<'chartjs-adapter-luxon:2
Uncaught SyntaxError: expected expression, got '<'chartjs-plugin-streaming:2

Razor组件代码 #

<LineChart @ref="horizontalLineChart" TItem="LiveDataPoint" OptionsObject="@horizontalLineChartOptions">
<ChartStreaming TItem="LiveDataPoint"
                Options="new ChartStreamingOptions { Delay = 2000 }"
                Refreshed="@OnHorizontalLineRefreshed" />
</LineChart>

@code{
LineChart<LiveDataPoint> horizontalLineChart;
Random random = new Random( DateTime.Now.Millisecond );

string[] Labels = { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" };
List<string> backgroundColors = new List<string> { ChartColor.FromRgba( 255, 99, 132, 0.2f ), ChartColor.FromRgba( 54, 162, 235, 0.2f ), ChartColor.FromRgba( 255, 206, 86, 0.2f ), ChartColor.FromRgba( 75, 192, 192, 0.2f ), ChartColor.FromRgba( 153, 102, 255, 0.2f ), ChartColor.FromRgba( 255, 159, 64, 0.2f ) };
List<string> borderColors = new List<string> { ChartColor.FromRgba( 255, 99, 132, 1f ), ChartColor.FromRgba( 54, 162, 235, 1f ), ChartColor.FromRgba( 255, 206, 86, 1f ), ChartColor.FromRgba( 75, 192, 192, 1f ), ChartColor.FromRgba( 153, 102, 255, 1f ), ChartColor.FromRgba( 255, 159, 64, 1f ) };

public struct LiveDataPoint
{
    public object X { get; set; }

    public object Y { get; set; }
}

object horizontalLineChartOptions = new
{
    Scales = new
    {
        Y = new
        {
            Title = new
            {
                Display = true,
                Text = "Value"
            }
        }
    },
    Interaction = new
    {
        intersect = false
    }
};

protected override async Task OnAfterRenderAsync( bool firstRender )
{
    if ( firstRender )
    {
        await Task.WhenAll(
            HandleRedraw( horizontalLineChart, GetLineChartDataset1 ) );
    }
}

async Task HandleRedraw<TDataSet, TItem, TOptions, TModel>( BaseChart<TDataSet, TItem, TOptions, TModel> chart, params Func<TDataSet>[] getDataSets )
    where TDataSet : ChartDataset<TItem>
    where TOptions : ChartOptions
    where TModel : ChartModel
{
    await chart.Clear();

    await chart.AddLabelsDatasetsAndUpdate( Labels, getDataSets.Select( x => x.Invoke() ).ToArray() );
}

LineChartDataset<LiveDataPoint> GetLineChartDataset1()
{
    return new LineChartDataset<LiveDataPoint>
    {
        Data = new List<LiveDataPoint>(),
        Label = "Dataset 1 (linear interpolation)",
        BackgroundColor = backgroundColors[0],
        BorderColor = borderColors[0],
        Fill = false,
        Tension = 0,
        BorderDash = new List<int> { 8, 4 },
    };
}

Task OnHorizontalLineRefreshed( ChartStreamingData<LiveDataPoint> data )
{
    data.Value = new LiveDataPoint
    {
        X = DateTime.Now,
        Y = RandomScalingFactor(),
    };

    return Task.CompletedTask;
}

double RandomScalingFactor()
{
    return ( random.NextDouble() > 0.5 ? 1.0 : -1.0 ) * Math.Round( random.NextDouble() * 100 );
}
}

问题原因 #

1. MIME类型识别错误：ASP.NET Core静态文件中间件默认根据文件扩展名识别MIME类型，无扩展名的脚本文件会被标记为text/html而非application/javascript。浏览器以HTML规则解析JS内容时，会将代码中的特殊字符（如<）误判为HTML标签起始，触发语法错误。
2. 路径或文件缺失：若脚本文件路径错误或文件未正确部署，服务器会返回404页面的HTML内容，浏览器尝试将HTML解析为JS，同样会抛出该错误。

解决步骤 #

1. 为脚本添加.js扩展名

   • 将wwwroot/files下的文件重命名为：luxon.js、chartjs-adapter-luxon.js、chartjs-plugin-streaming.js。
   • 更新host.cshtml中的引用路径：

     <script src="files/luxon.js"></script>
     <script src="files/chartjs-adapter-luxon.js"></script>
     <script src="files/chartjs-plugin-streaming.js"></script>
     

2. 确认静态文件中间件配置

   • 检查Program.cs中是否已启用静态文件服务（默认已包含，若缺失则添加）：

     app.UseStaticFiles();
     

3. 验证文件部署与权限

   • 确认发布后脚本文件存在于服务器的wwwroot/files目录下。
   • 确保ASP.NET Core进程拥有该目录的读取权限。

内容的提问来源于stack exchange，提问作者Mdarende