vue3 @代指src路径设置

第一步、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"]
}

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