如果选择这两种配置的话,需要自己手动安装依赖和配置,因为这种快速创建项目,里面什么都没有,包括pinia和router(路由)都没有,什么都需要你自己手动去安装,自己再去手动配置。如果需要配置@别名路径话,需要做如下配置。
需要加入 path 依赖:
npm install path
在 vite.config.ts 文件的配置:
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import path from "path"
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src")
}
}
})
在 typescript 项目中进行配置
在 vite + typescript 中配置路径别名时需要注意, 直接使用__dirname的话, typescript 会报错cannot find name ‘__dirname’, 这时候需要拉取依赖
npm install -D @types/node
来给让 typescript 识别出. __dirname
并且需要在ts.config.json内设置:
"compilerOptions":{
"paths":{
"@/*": ["./src/*"],
},
}
注意, 若在src前无./, 可能会报错:
Non-relative paths are not allowed when 'baseUrl' is not set. Did you forget a leading './'?
这是因为需要在ts.config.json中指定相对路径, 只需要指定相对路径即可.
直接把如下代码粘贴到ts.config.json中
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
},
这样配置之后,就有智能提示了
来指定项目的基本路径. 这时候在 vscode 中路径引入时打出@之后, 就可以提示路径了.
并且设置baseUrl后, 可以不用在paths配置内使用相对路径了.
来自山里令山的创作https://blog.csdn.net/qq_46266305/article/details/131198257
reference
- https://bobbyhadz.com/blog/typescript-cannot-find-name-dirname
我更推荐大家创建项目的话,看如上图箭头所示,选择自定义配置项,不要选择JavaScript和TypeScript,因为可以自由选择想要配置的东西。*
如果你选择自定义配置的话,可以自由选择想要配置的东西,当然vite-alias,这个也是自动配置好的,不需要你自己在手动的安装依赖和配置ts.config.json,就可以使用@,来引入路径,同时也有智能提示