如何将SciChart接入Nuxt.js项目？安装后运行报错该如何解决？

• SciChart运行依赖专属的WebAssembly（.wasm）文件、Web Worker脚本文件，默认Nuxt2的webpack配置不会自动将node_modules/scichart包下的这些静态资源拷贝到构建后的可访问目录，运行时资源加载失败触发报错
• Nuxt2默认开启服务端渲染（SSR），SciChart是纯浏览器端运行的类库，依赖window、document等浏览器专属API，服务端编译阶段直接导入SciChart相关代码会因缺少浏览器环境报错
• 你额外添加的buildsci、startsci是纯webpack项目的启动脚本，和Nuxt自带的构建流程冲突，也会导致运行异常

1. 调整package.json脚本 #

删掉多余的webpack相关脚本，调整后scripts配置如下：

{
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  }
}

2. 配置nuxt.config.js添加资源拷贝规则 #

在项目根目录的nuxt.config.js中，修改build配置，用已安装的copy-webpack-plugin把SciChart的静态资源拷贝到可访问路径：

const CopyWebpackPlugin = require('copy-webpack-plugin')
const path = require('path')

export default {
  // 其他原有配置保持不变
  build: {
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          {
            from: path.join(__dirname, 'node_modules/scichart/_wasm'),
            to: path.join(__dirname, 'static/scichart'),
            noErrorOnMissing: true
          }
        ]
      })
    ]
  }
}

3. 处理SSR兼容 #

所有用到SciChart的组件统一使用.client.vue后缀命名，Nuxt会自动将这类组件标记为仅客户端渲染，避免服务端编译报错。例如创建components/ScichartDemo.client.vue文件，示例代码如下：

<template>
  <div id="scichart-root" style="width: 600px;height: 400px;"></div>
</template>

<script>
import { SciChartSurface, NumericAxis, FastLineRenderableSeries, XyDataSeries } from 'scichart'

export default {
  async mounted() {
    // 初始化前指定SciChart静态资源的本地路径
    SciChartSurface.loadWasmFromFolder('/scichart/')
    const { sciChartSurface, wasmContext } = await SciChartSurface.create('scichart-root')
    
    // 添加坐标轴
    sciChartSurface.xAxes.add(new NumericAxis(wasmContext))
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext))
    
    // 添加示例折线
    const dataSeries = new XyDataSeries(wasmContext)
    for (let i = 0; i < 100; i++) {
      dataSeries.append(i, Math.sin(i * 0.1))
    }
    sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
      dataSeries,
      stroke: '#FF6600',
      strokeThickness: 2
    }))
  }
}
</script>

4. 测试运行 #

执行npm run dev启动项目，在页面中引入上述<ScichartDemo />组件即可正常渲染图表。

内容的提问来源于stack exchange，提问作者Альберт Халимов