Vue TypeScript使用顶层await触发withAsyncContext不存在编译错误求助

错误根源 #

这个编译错误由依赖版本不兼容和编译工具配置不匹配导致：

1. 项目安装了Vue 3.x，但同时使用了Vue 2专属的编译工具vue-template-compiler，两者不兼容，使得编译时无法生成顶层await所需的withAsyncContext辅助函数。
2. TypeScript配置可能未开启顶层await支持，或是Vue类型定义未正确引入。

解决方案 #

1. 修复依赖版本 #

卸载Vue 2的编译工具，替换为Vue 3对应的编译依赖：

# 卸载Vue 2编译工具
npm uninstall vue-template-compiler

# 安装Vue 3单文件组件编译器
npm install @vue/compiler-sfc --save-dev

当前使用的vue-loader@17.0.0适配Vue 3，无需更换。

2. 调整TypeScript配置 #

修改项目根目录的tsconfig.json，确保配置项满足顶层await和Vue类型支持：

{
  "compilerOptions": {
    "target": "ES2017", // 最低需ES2017以支持async/await
    "module": "ESNext", // 开启顶层await支持
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "types": ["vue"], // 引入Vue类型定义
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts", "src/**/*.vue"]
}

3. 优化顶层await代码写法（可选） #

用Promise.all替代axios.all（二者功能一致），简化异步请求代码：

const urls = ['/protected/api/indennita'];
const responses = await Promise.all(urls.map(url => axios.get(url)));
indennitaData.table = responses[0].data;

4. 清除缓存并重新构建 #

执行以下命令清除缓存、重装依赖并启动项目：

# 清除npm缓存
npm cache clean --force

# 删除旧依赖文件
rm -rf node_modules package-lock.json

# 重装依赖
npm install

# 启动开发服务
npm run dev-server

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