上一篇初始化了一个vue3+vite+ts 的项目，下面来介绍如何配置别名。

首先安装@type/node

npm i @types/node -D

安装完成后，项目src文件夹下会自动生成一个vite-env.d.ts文件夹

配置别名

安装完@type/node之后，需要在文件vite.config.ts文件中进行相关配置，具体代码如下：

import { resolve } from "path";

//配置
resolve:{
    alias: {
      '@': resolve(__dirname, 'src'),
    },
    // 类型： string[] 导入时想要省略的扩展名列表。
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.mjs']
  },

完整代码：

这时候就可以用“@/路径”的形式来简化引用src文件夹下的文件了。

使用别名引入文件

我们在src文件夹下新建utils文件夹，在该文件夹下新建文件alias.ts，随便写一个方法如下：

const alias = () => {
    alert('设置别名成功')
}
export default alias

然后在view/home/index.ts中引入该方法并调用

//引入
import alias from "@/utils/alias";

//调用
<el-button type="danger" plain @click="alias">Danger</el-button>

运行效果： 点击按钮就可以看到显示效果

问题处理

在配置完成后，我们可以看到编辑器有错误提示的标记，错误内容“找不到模块“@/utils/alias”或其相应的类型声明”

虽然不影响程序正常运行，但是看着也是烦人，所以我们也要解决这个错误显示，解决方法也很简单，在tsconfig.json文件添加上如下代码就ok了！

"baseUrl": "./",
"paths":{
  "@": ["src"],
  "@/*": ["src/*"],
}

完整代码：

然后，别名设置完毕，这个学习给了我很大的帮助，感谢总要学点什么的文章

参考文章：小白系列Vite-Vue3-TypeScript：002-配置别名_vue3配置别名_总要学点什么的博客-CSDN博客