Vue3导入@cornerstonejs/tools报错：无法解析ICRPolySeg.wasm依赖

1. 修复Vue CLI配置语法错误 #

你的vue.config.js中experiments配置存在语法错误：syncWebAssembly: true行末缺少逗号，导致Webpack配置无法正常加载。修正后的配置如下：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    experiments: {
      syncWebAssembly: true,
      asyncWebAssembly: true
    }
  },
})

2. 添加Webpack解析回退规则 #

@icr/polyseg-wasm内部存在虚拟依赖声明，Webpack无法解析时会抛出错误。在Webpack配置中添加resolve.fallback，告知Webpack忽略这些无法解析的依赖：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    experiments: {
      syncWebAssembly: true,
      asyncWebAssembly: true
    },
    resolve: {
      fallback: {
        "a": false,
        "fs": false,
        "path": false
      }
    }
  },
})

3. 转译相关依赖包 #

将@icr/polyseg-wasm和@cornerstonejs/tools加入transpileDependencies列表，确保Babel转译其内部代码，避免语法兼容问题：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: ['@cornerstonejs/tools', '@icr/polyseg-wasm'],
  configureWebpack: {
    experiments: {
      syncWebAssembly: true,
      asyncWebAssembly: true
    },
    resolve: {
      fallback: {
        "a": false,
        "fs": false,
        "path": false
      }
    }
  },
})

4. 手动复制Wasm文件（可选） #

如果上述方案仍未解决问题，可使用copy-webpack-plugin将Wasm文件直接复制到打包输出目录：

1. 安装插件：

npm install copy-webpack-plugin --save-dev

2. 更新vue.config.js：

const { defineConfig } = require('@vue/cli-service')
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = defineConfig({
  transpileDependencies: ['@cornerstonejs/tools', '@icr/polyseg-wasm'],
  configureWebpack: {
    experiments: {
      syncWebAssembly: true,
      asyncWebAssembly: true
    },
    resolve: {
      fallback: {
        "a": false,
        "fs": false,
        "path": false
      }
    },
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          {
            from: 'node_modules/@icr/polyseg-wasm/dist/ICRPolySeg.wasm',
            to: 'js/[name][ext]'
          }
        ]
      })
    ]
  },
})

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