跳至主要內容

vite+ts vscode 无法识别别名路径

安格前端小于 1 分钟...

vite+ts vscode 无法识别别名路径

转载自:CSDN 博主「chendf_」的原创文章open in new window

在 vite+ts 项目中,在 vite.config.ts 中配置了别名,在其他文件中使用别名,vscode 会报错说找不到这个模块

vite.config.ts 文件配置

// ...
resolve: {
    // 配置别名
    alias: {
      '@': path.join(__dirname, './src'),
      '@components': path.join(__dirname, './src/components'),
      '@utils': path.join(__dirname, './src/utils')
    }
},
// ...

解决方法

配置 tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "types": ["vite/client"],

    // ++ 这里加上baseUrl 和 path即可 ++
    "baseUrl": "./",
    "paths": {
      // 根据别名配置相关路径
      "@utils/*": ["./src/utils/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

如果没有使用 ts 使用的是 js,那么只需要配置 jsconfig.json 即可,这个和构建工具无关,只需要将这个 json 文件放在根目录即可,在 webpack 项目中也适用

上次编辑于:
你认为这篇文章怎么样?
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v3.1.3