使用Nginx Alias部署Scichart.js+React项目时Wasm模块加载报错

DevOps 小满

2026-6-16

解决SciChart在Nginx Alias配置下的版本不匹配报错

问题分析

尽管scichart2d.wasm和scichart2d.data返回200，但报错提示版本不匹配，核心原因是子路径下的资源路径解析冲突和缓存机制导致的旧版本文件加载：

相对路径./scichart2d.wasm在子路由场景下会解析错误（比如/indexViewer/detail页面会请求/indexViewer/detail/scichart2d.wasm），即使Nginx配置了sub_filter，SciChart内部的路径逻辑仍可能出现偏差。
SciChartDefaults.useSharedCache = true开启后，不同路径下的缓存会相互干扰，导致加载到旧版本的Wasm模块。

解决方案

1. 修正Vite基础路径配置

在vite.config.js中设置项目基础路径，让所有资源自动带上子路径前缀：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  base: '/indexViewer/' // 匹配Nginx的alias路径
});

2. 调整SciChart的资源路径配置

保持相对路径即可（Vite会自动添加base前缀），同时关闭共享缓存避免冲突：

export const SetSciChartSurface = () => {
  SciChartSurface.setRuntimeLicenseKey(window.REACT_APP_SCICHART_KEY);
  SciChartSurface.configure({
    wasmUrl: "./scichart2d.wasm",
    dataUrl: "./scichart2d.data",
  });

  SciChartDefaults.useSharedCache = false; // 关闭共享缓存，避免跨路径缓存冲突

  return SciChartSurface;
};

3. 完善Nginx Alias配置

添加try_files处理React路由刷新问题，同时统一路径大小写（避免Windows下潜在的路径匹配问题）：

location /indexViewer {
    alias   "C:\\nginx\\build\\indexViewer"; # 与root配置统一大小写
    index index.html index.htm;
    try_files $uri $uri/ /indexViewer/index.html; # 处理React单页路由刷新
    sub_filter assets/ indexViewer/assets/; 
    sub_filter_once off;
    sub_filter_types *;
}