vue3 @代指src路径设置

原创于 2026-08-19 13:40:03 发布 · 123 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

当前文章被收录于：

2 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

话题

#CodingPlan·八月创作之星博客挑战赛

第一步、npm安装path

第二步、然后在vite.config.ts中引入

import { resolve } from 'path'

export default defineConfig({
  base:"./",
  plugins: [vue()],
  resolve:{
    alias:{
      "@":resolve(__dirname, './src'),
    }
  },
})

第三步、除此之外，还需要在tsconfig.app.json中声明

完整代码如下：

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
    "ignoreDeprecations": "6.0",
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "types": ["vite/client"],
    "allowArbitraryExtensions": true,

    /* Linting */
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

然后就能在文件中正常引用了。