【Vue】vite + ts 配置别名

最新推荐文章于 2025-07-03 09:32:02 发布

文艺倾年

最新推荐文章于 2025-07-03 09:32:02 发布

阅读量916

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # vue 文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/m0_51517236/article/details/125680827

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在Vite项目中遇到的关于添加别名时，尝试引入Node.js内置的path模块导致的错误。由于TypeScript不直接支持Node.js，因此在VSCode中会出现提示错误。解决方案是通过安装@types/node类型定义来解决这个问题。配置了Vite的配置文件vite.config.ts和tsconfig.json，展示了如何设置别名以及相关编译选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path'

function _resolve(dir: string) {
  return resolve(__dirname, dir)
}

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

2.tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "importHelpers": true, // 不让同样的辅助函数重复的出现在多个文件中
    "allowSyntheticDefaultImports": true, // 允许对不包含默认导出的模块使用默认导入。
    "baseUrl": ".", // 非相对模块的导入可以相对于baseUrl或通过下文会讲到的路径映射来进行解析
    "lib": [
      "esnext",
      "dom"
    ],
    "paths": { // 配置导出路径（这里根据自己项目执行修改）
      "@/components*": [
        "./src/components*"
      ],
      "@/layouts*": [
        "./src/layouts*"
      ],
      "@/assets*": [
        "./src/assets*"
      ],
    },
    "skipLibCheck": true
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}