VueJS+TypeScript+VSCode：ESM导入需显式扩展名问题求助

核心问题拆解 #

你碰到的是Node.js ESM规范（强制要求显式文件扩展名）和Vite打包逻辑（允许省略扩展名）的行为矛盾，再加上VSCode的TypeScript检查严格遵循Node16模块解析规则，导致编辑器提示和实际构建运行的要求不一致。

具体解决方案 #

1. 调整tsconfig.json的模块解析策略

把moduleResolution从Node16改成Bundler——这是TypeScript专为Vite、Webpack这类打包工具设计的解析模式，既兼容ESM语法，又不需要强制添加文件扩展名。修改后的配置如下：

"compilerOptions": {
  "target": "ES2020",
  "module": "ES2020",
  "moduleResolution": "Bundler",
  "allowSyntheticDefaultImports": true,
  "esModuleInterop": true
}

• allowSyntheticDefaultImports和esModuleInterop是为了更好兼容项目里的CommonJS组件，避免导入时出现语法错误。

2. 保留package.json的type: module，修正VSCode检查行为

在项目根目录创建.vscode/settings.json，添加配置让VSCode的TypeScript检查和Vite打包逻辑对齐：

{
  "typescript.preferences.importModuleSpecifierEnding": "never",
  "typescript.tsdk": "./node_modules/typescript/lib"
}

• importModuleSpecifierEnding: "never"会让VSCode不再强制要求你添加.js扩展名；
• typescript.tsdk指定使用项目本地安装的TypeScript版本，避免全局版本和项目依赖版本不一致导致的检查差异。

3. 优化ts-node的ESM支持（若运行仍有问题）

如果用ts-node启动服务时还是有ESM相关报错，推荐换成tsx（更轻量的ESM兼容运行工具），安装后直接用tsx server.ts启动服务；或者在tsconfig的ts-node配置里补充：

"ts-node": {
  "esm": true,
  "experimentalSpecifierResolution": "node"
}

experimentalSpecifierResolution: "node"会让ts-node采用更宽松的扩展名解析规则，和Vite保持一致。

4. 兼容CommonJS组件导入

如果项目里的CommonJS组件导入报错，比如import foo from './cjs-module'，可以尝试给这类导入添加.cjs扩展名，或者用Vite的optimizeDeps配置提前预编译CommonJS模块：

// vite.config.ts
export default {
  optimizeDeps: {
    include: ['你的CommonJS组件包名']
  }
}

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