构建vite vue3 ts 项目
# yarn create vite my-vue-app --template vue
根据提示选择vue3 和ts
配置@路径别名
项目搭建成功后App.vue 如下
helloworld 通过./component引入
改成比较习惯的@别名试一下
会报错:
配置别名步骤
一、安装依赖
npm i @types/node -D
二、修改vite.config.js
关键代码截图
注意:vite 官方文档中 不建议忽略 .vue 后缀的文,所以在 import 引入文件的时候需要加 .vue
关键代码(复制用)
import { resolve } from 'path'
resolve: {
alias: {
"@": resolve(__dirname, 'src'), // 路径别名
},
extensions: ['.js', '.json', '.ts'] // 使用路径别名时想要省略的后缀名,可以自己 增减
},
修改tsconfig.json
关键代码截图
关键代码(复制用)
"compilerOptions": {
...
"baseUrl": ".", // 用于设置解析非相对模块名称的基本目录,相对模块不会受到baseUrl的影响
"paths": { // 用于设置模块名到基于baseUrl的路径映射
"@/*": ["src/*"]
}
...
}