记录vue3+ts+vite+element-plus环境搭建踩坑(持续更新)

@ 提示报错

在项目中未正确配置 alias (路径别名)时，.vue文件会提示找不到@/**/*.vue文件之类的错误，解决方式：

// 在vite.config.ts中增加配置
import { resolve } from 'path';
export default defineConfig({
    ···
    resolve: {
        alias: {
            '@': resolve('./src')
        },
  },
    ···
}
// 同步在tsconfig.json中添加相应配置
{
  "compilerOptions": {
    ...
    "paths": {
      "@/*": ["./src/*"]
    },
    ···
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

ts文件中无法识别.vue文件

解决方式：

1. 根目录下新增shims-vue.d.ts

// shims-vue.d.ts

declare module '*.vue' {
  import { ComponentOptions } from 'vue';
  const componentOptions: ComponentOptions;
  export default componentOptions;
}

2. tsconfig.json中include 新增 shims-vue.d.ts

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

element-plus 按需引入后，在ts文件中引入组件报错

解决方式：

1. 新增auto-imports.d.ts(启动项目后会自动新增按需组件，不用修改)
2. tsconfig.json中include 新增 auto-imports.d.ts

{
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "shims-vue.d.ts", "auto-imports.d.ts"]
}