在Vite+Vue项目中运行argon2-browser遇顶级await错误求助

针对你遇到的argon2-browser在Vite项目中触发的top-level await错误，试试以下几个可行的解决方向：

1. 排除argon2-browser依赖预构建 #

Vite的依赖预构建可能会对包含top-level await的wasm文件处理出错，在vite.config.ts的optimizeDeps中添加排除配置：

export default defineConfig({
  plugins: [
    wasm(),
    topLevelAwait(), 
    vue(),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
      "/^~/": '',
    },
  },
  optimizeDeps: {
    exclude: ['argon2-browser'], // 新增这行
  },
});

2. 使用动态导入替代静态导入 #

静态导入会在项目初始化阶段加载argon2-browser，改用动态导入可以避开预构建阶段的限制，比如在需要使用的组件或工具函数中：

// 不要用静态import，改用async函数内的动态导入
async function hashPassword(password) {
  const argon2 = (await import('argon2-browser')).default;
  const result = await argon2.hash({
    pass: password,
    salt: 'random-salt', // 实际使用请生成随机盐
  });
  return result.hash;
}

3. 同步插件版本兼容性 #

确保vite-plugin-wasm和vite-plugin-top-level-await的版本与当前Vite版本匹配，执行以下命令更新插件：

npm update vite-plugin-wasm vite-plugin-top-level-await

如果更新后仍有问题，可以尝试锁定插件版本（比如vite-plugin-wasm@1.1.0和vite-plugin-top-level-await@1.4.1），这些版本在多数Vite 4/5项目中兼容性较好。

4. 手动适配Vite的Wasm导入规则 #

如果以上方法无效，可以尝试修改argon2-browser的wasm导入方式，使用Vite支持的?init后缀：

1. 找到node_modules/argon2-browser/dist/argon2.js文件，定位其中导入wasm的代码
2. 将import wasmUrl from './argon2.wasm'修改为import initWasm from './argon2.wasm?init'
3. 调整代码逻辑，先调用initWasm()初始化wasm后再使用argon2的方法
4. 用patch-package保存这个修改，避免npm安装覆盖：

   npx patch-package argon2-browser
   

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