Vue3+Ts+Vite配置项目路径别名（@/....）

最新推荐文章于 2025-02-20 12:43:09 发布

@AfeiyuO

最新推荐文章于 2025-02-20 12:43:09 发布

阅读量842

点赞数 7

分类专栏： TS+Vue3 文章标签： typescript

本文链接：https://blog.youkuaiyun.com/xfy991127/article/details/134700955

版权

TS+Vue3 专栏收录该内容

9 篇文章

订阅专栏

本文详细描述了如何在项目中安装path插件并解决TypeScript编译时的错误，以及如何在Vite配置中设置alias和baseUrl以避免报错。作者提供了tsconfig.json和vite.config.ts中的关键代码示例，指向了Vite配置文档链接。

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

1、首先安装path插件

"path-intellisense.mappings": {
        "@": "${workspaceRoot}/src"
 },

添加完就会有提示

但是还会报TS的错

2、解决TS报错

在tsconfig.json中加下面代码

 "compilerOptions": {

    "baseUrl": "./",
    "paths": {
      "@/*":[
        "src/"    //配置文件路径，@直接到src
      ],
      "#/*":[
        "types/*"
      ]
    }
  },

这样Ts就不报错了

3、解决vite报错

在vite.config.ts加入下面代码

import * as path from "path"


export default defineConfig({
  plugins: [vue()],
  resolve:{
    alias:{
      "@":path.join(__dirname,"src"),
      "#":path.join(__dirname,"types")
    }
  }
})