如何让DOM内Vue模板适配TypeScript？解决IDE类型报错

方法1：自定义模块声明文件 #

• 在项目里新建一个.d.ts文件，比如src/vue-bundler.d.ts
• 把下面的代码丢进去，直接告诉TS这个模块的类型：

  declare module 'vue/dist/vue.esm-bundler.js' {
    import type { App, CreateAppFunction } from 'vue'
    export const createApp: CreateAppFunction<Element>
    // 要是用到其他Vue API比如defineComponent，也可以在这里加上对应的导出
  }
  

• 记得检查tsconfig.json的include字段，确保这个.d.ts文件被TS识别到，比如：

  {
    "include": ["src/**/*", "src/vue-bundler.d.ts"]
  }
  

方法2：改用标准导入+配置替换打包版本 #

不用直接导入那个带bundler的路径，保持正常导入，通过配置让打包工具用bundler版本：

• 导入代码改成：

  import { createApp } from 'vue'
  

• 然后根据你的构建工具加配置：
  • Vue CLI项目（vue.config.js）：

    module.exports = {
      chainWebpack: config => {
        config.resolve.alias.set('vue$', 'vue/dist/vue.esm-bundler.js')
      }
    }
    

  • Vite项目（vite.config.ts）：

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    
    export default defineConfig({
      plugins: [vue({
        template: {
          compilerOptions: {
            // 这里可以根据需要配置自定义元素判断，或者空着也能支持DOM内模板
            isCustomElement: tag => tag.startsWith('my-')
          }
        }
      })]
    })
    

这样TS会自动用Vue官方的类型定义，同时运行时用的是支持DOM内模板的bundler版本。

方法3：用TS路径映射关联类型文件 #

在tsconfig.json里加个路径映射，让TS把那个bundler模块和官方的.d.ts关联起来：

{
  "compilerOptions": {
    "paths": {
      "vue/dist/vue.esm-bundler.js": ["node_modules/vue/dist/vue.d.ts"]
    }
  }
}

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