Vue3src 路径别名`@`的配置vite.config.ts,tsconfig.json

最新推荐文章于 2025-03-25 11:39:33 发布

前端小云儿

最新推荐文章于 2025-03-25 11:39:33 发布

阅读量1k

点赞数

分类专栏： vue3知识点文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/jieweiwujie/article/details/136119623

版权

vue3知识点专栏收录该内容

88 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在Vue3项目中如何为`src`文件夹配置路径别名`@`，以简化复杂的文件引用。通过vite.config.ts和tsconfig.json的设置，实现便捷的路径引用。

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

路径别名`@`的配置在开发项目的时候文件与文件关系可能很复杂，因此我们需要给 src 文件夹配置一个别名。

这个有好几种写法都可以实现配置，下面可以看看这些写法

// vite.config.ts

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "./src") // 相对路径别名配置，使用 @ 代替 src
        }
    }
})
————————————————

// ts 编译配置
// tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
    "paths": { //路径映射，相对于baseUrl
      "@/*": ["src/*"]