vue3+vite+TS别名alias设置

强迫症，看到这个红线就头疼，必须把他解决掉，并且记录自己解决问题的过程，参考好多人发的文章，自己做了个总结，自认为比较简单高效的方法。

第一步

vite配置好别名

安装@types/node插件，用于在ts中配置node

npm i @types/node

vite.config.ts 配置好alias

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
const srcPath = resolve(__dirname, 'src');
console.log('srcPath:', srcPath);  // 打印配置的地址检查是否正确

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
 
});

第二步

添加*.vue文件类型声明至 src/vite-env.d.ts

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

或者

declare module '*.vue' {
  import { DefineComponent } from 'vue';
  const component: DefineComponent;
  export default component;
}

最后重启一下编译器