Javascript 使用领域Web SDK的Vite+Vue应用程序中的Web程序集(WASM)错误

这些错误表明WASM模块预期的MIME类型以及加载或解析WebAssembly模块的方式存在问题，如在this issue中:Vite开发服务器没有正确地为具有application/wasm MIME类型的.wasm文件提供服务.

您可以try 并配置VITE以正确的MIME类型正确地为WASM文件提供服务，修改您的vite.config.js文件以包括用于处理.wasm个文件的定制中间件，如mycelial/mycelial-js issue 25:

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

// Custom middleware to serve wasm files with the correct MIME type
const wasmMiddleware = () => {
  return {
    name: 'wasm-middleware',
    configureServer(server) {
      server.middlewares.use((req, res, next) => {
        if (req.url.endsWith('.wasm')) {
          const wasmPath = path.join(__dirname, 'public', req.url);
          const wasmFile = fs.readFileSync(wasmPath);
          res.setHeader('Content-Type', 'application/wasm');
          res.end(wasmFile);
          return;
        }
        next();
      });
    },
  };
};

export default defineConfig({
  plugins: [vue(), wasmMiddleware()],
  esbuild: {
    supported: {
      'top-level-await': true
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      supported: {
        "top-level-await": true
      },
    },
  },
})

That custom middleware checks for requests ending in .wasm and serves them with the correct Content-Type header. That assumes the .wasm files are located in a public directory at the root of your project.
And that would be tailored for development with Vite's dev server and assumes your production environment already correctly serves .wasm files with the appropriate MIME type, as the issue does not manifest when using vite build followed by vite preview.

最后，我通过使用中间件选项让它工作，但直接将其重定向到Realm文件夹:

const wasmPath = path.join(__dirname, 'node_modules/realm/dist', path.basename(req.url));个

True:不是从通用或不正确的路径(如public文件夹或.vite缓存)提供.wasm个文件，而是直接指向这些文件在node_modules目录中的实际位置.在中间件功能中调整路径:

const wasmMiddleware = () => {
  return {
    name: 'wasm-middleware',
    configureServer(server) {
      server.middlewares.use((req, res, next) => {
        if (req.url.endsWith('.wasm')) {
          // Directly point to the .wasm file within the realm/dist directory
          const wasmPath = path.join(__dirname, 'node_modules/realm/dist', path.basename(req.url));
          try {
            const wasmFile = fs.readFileSync(wasmPath);
            res.setHeader('Content-Type', 'application/wasm');
            res.end(wasmFile);
          } catch (error) {
            console.error('Failed to load WASM file:', error);
            next();
          }
          return;
        }
        next();
      });
    },
  };
};