非Vite环境搭建Vue3项目：createApp导入不存在错误排查

核心原因 #

你遇到的问题本质是TypeScript模块解析逻辑错误，导致编辑器错误关联了Vue的旧声明文件（index.d.ts），而非Vue 3正确的ES模块声明文件（vue.d.mts）。这通常和TS配置、Webpack的模块解析配置不匹配有关。

具体解决步骤 #

1. 修正TypeScript配置（tsconfig.json） #

确保你的tsconfig.json启用适配现代打包工具的模块解析规则：

{
  "compilerOptions": {
    "moduleResolution": "bundler", // 或"node16"，适配ES模块解析逻辑
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "target": "ESNext",
    "module": "ESNext"
  }
}

moduleResolution: "bundler"会让TS遵循Webpack等打包工具的模块解析逻辑，正确识别Vue包中package.json的exports字段，从而匹配到正确的声明文件。

2. 配置Webpack的Vue模块别名 #

在Webpack配置文件中添加resolve.alias，确保Webpack和编辑器都指向Vue的ES模块版本：

const path = require('path');

module.exports = {
  // ...其他配置
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm-bundler.js' // 指定Vue的ES模块入口
    },
    extensions: ['.ts', '.js', '.vue', '.json']
  }
};

这个配置会让Webpack和编辑器优先加载Vue的ES打包版本，对应的类型声明就是vue.d.mts，而非旧的CommonJS风格声明文件。

3. 检查Vue依赖版本 #

确认package.json中安装的是Vue 3.x版本：

{
  "dependencies": {
    "vue": "^3.3.4"
  }
}

如果误装Vue 2自然会找不到createApp，但从你描述的跳转文件来看，更可能是解析问题而非版本问题。

4. 重启编辑器语言服务 #

修改配置后，执行VSCode快捷键Ctrl+Shift+P，选择TypeScript: Restart TS Server，让编辑器重新加载配置和类型文件。

验证 #

完成上述配置后，点击vue的导入应该会跳转到vue.d.mts，且createApp的导出错误会消失。

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