TS2614 FormInstance不识别

个人理解，TS不识别的原因是因为在import的时候， path中没有配置相关的信息，导致ts报错。

paths中加入了element-plus这一行，报错解决，是否有隐藏的问题，暂未知。

顺便贴下Element-plus自动按需引入相关配置：

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    //element按需导入
    AutoImport({
      //安装两行后你会发现在组件中不用再导入ref，reactive等
      imports: ['vue', 'vue-router'],
      dts: 'src/auto-import.d.ts',
      //element
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          prefix: 'Icon'
        })
      ],
      eslintrc: {
        enabled: true
      }
    }),
    Components({
      //element
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          enabledCollections: ['ep'] //@iconify-json/ep 是 Element Plus 的图标库，所以 IconsResolver 配置了 enabledCollections: ['ep']
        })
      ]

      //默认存放位置
      //dts: "src/components.d.ts",
    }),
    Icons({
      autoInstall: true
    })
  ],
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
})

 package.json

{
  "name": "123",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --force dev",
    "pro": "vite --force pro",
    "build:dev": "vue-tsc && vite build --mode dev",
    "build:pro": "vue-tsc && vite build --mode pro",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix",
    "format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
    "prepare": "husky install"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "axios": "^1.4.0",
    "element-plus": "^2.3.4",
    "path": "^0.12.7",
    "pinia": "^2.0.35",
    "pinia-plugin-persist": "^1.0.0",
    "vue": "^3.2.47",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@types/node": "^18.16.3",
    "@typescript-eslint/eslint-plugin": "^5.59.2",
    "@typescript-eslint/parser": "^5.59.2",
    "@vitejs/plugin-vue": "^4.1.0",
    "eslint": "^8.39.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.11.0",
    "husky": "^8.0.3",
    "prettier": "^2.8.8",
    "sass": "^1.62.1",
    "ts-loader": "^9.4.2",
    "typescript": "^5.0.2",
    "unplugin-auto-import": "^0.15.3",
    "unplugin-icons": "^0.16.1",
    "unplugin-vue-components": "^0.24.1",
    "vite": "^4.3.2",
    "vue-loader": "^17.1.0",
    "vue-template-compiler": "^2.7.14",
    "vue-tsc": "^1.4.2"
  }
}

element-plus.d.ts， 此文件主要解决按需引入ElMessage, ElMessageBox, ElLoading等组件加载不到的问题。

export {}
declare global {
  const ElMessage: typeof import('element-plus')['ElMessage']
  const ElMessageBox: typeof import('element-plus')['ElMessageBox']
  const ElLoading: typeof import('element-plus')['ElLoading']
}

注意上述配置做好后，tsconfig.json中，include中要加入相关配置文件位置，才会生效。

问题全部解决。

完美的一天。