Vite项目中使用?url导入WASM失败的问题求助

1. 修正WASM文件导入路径 #

你之前的导入路径有误，根据你提供的md4w包目录结构，WASM文件位于包的根目录而非js子目录，需修正导入语句：

import wasmUrl from 'md4w/md4w-small.wasm?url';

2. 配置Vite识别WASM资源 #

在vite.config.ts中添加assetInclude配置，确保Vite将WASM文件视为资源并打包到dist目录：

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

export default defineConfig({
  plugins: [vue()],
  assetsInclude: ['**/*.wasm'], // 让Vite处理所有WASM文件
});

3. 完整组件代码示例 #

修改后的组件代码如下，确保初始化逻辑正确：

<script setup lang="ts">
import { init, mdToHtml } from 'md4w';
import wasmUrl from 'md4w/md4w-small.wasm?url';
import { onMounted, ref } from 'vue';
import 'github-markdown-css/github-markdown.css';

const props = defineProps<{ msg: string }>();
const html = ref('');

onMounted(async () => {
  try {
    await init(wasmUrl);
    html.value = mdToHtml(props.msg);
  } catch (err) {
    console.error('md4w初始化失败:', err);
  }
});
</script>

<template>
  <div class="markdown-body" v-html="html"></div>
</template>

备选方案：手动复制WASM文件（若上述方法无效） #

如果Vite仍无法识别包内WASM文件，可手动将node_modules/md4w/md4w-small.wasm复制到项目public目录，直接使用根路径初始化：

onMounted(async () => {
  await init('/md4w-small.wasm'); // public目录下的文件可直接通过根路径访问
  html.value = mdToHtml(props.msg);
});

该方式无需额外Vite配置，WASM文件会被直接复制到dist目录根目录。

问题原因复盘 #

• 首次构建失败：Vite默认不会自动打包node_modules中的WASM文件，导致dist目录缺失资源，浏览器请求时返回错误MIME类型。
• 第二次导入报错：你使用了错误路径md4w/js/wasm-small.wasm，实际WASM文件并不在js子目录下。

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