Nuxt3中使用含WebAssembly的lindera-js报错，如何配置vite-plugin-wasm？

问题原因 #

Vite 默认不支持 WebAssembly 的 ESM 集成提案，直接导入依赖 Wasm 的包会触发报错。

推荐方案：使用vite-plugin-wasm插件 #

这是适配性最好的解决方案，步骤如下：

1. 安装必要插件
   需同时安装 vite-plugin-wasm 和 vite-plugin-top-level-await（多数 Wasm 包依赖顶层 await 特性）：

npm install -D vite-plugin-wasm vite-plugin-top-level-await
# 或用yarn
yarn add -D vite-plugin-wasm vite-plugin-top-level-await
# 或用pnpm
pnpm add -D vite-plugin-wasm vite-plugin-top-level-await

2. 配置Nuxt3
   在项目根目录的 nuxt.config.ts 中添加插件配置：

import wasm from 'vite-plugin-wasm'
import topLevelAwait from 'vite-plugin-top-level-await'

export default defineNuxtConfig({
  vite: {
    plugins: [
      wasm(),
      topLevelAwait()
    ]
  }
})

3. 正常使用lindera-js
   重启 Nuxt 开发服务器后，即可在组件中正常导入并调用：

<script setup>
import { tokenize } from 'lindera-js'

const tokenizeText = () => {
  const tokens = tokenize('今日はいい天気ですね')
  console.log(tokens)
}
</script>

<template>
  <button @click="tokenizeText">测试分词</button>
</template>

替代方案：手动处理Wasm导入（不推荐） #

如果不想安装插件，可按照 Vite 提示使用 .wasm?init 或 .wasm?url 手动加载 Wasm，但这种方式需要修改第三方包内部的 Wasm 引用路径，操作繁琐且易引发版本兼容问题，因此不推荐。

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