526互联

配置 @ 路径符

发布时间 2023-10-03 22:14:09作者: 灵火

教程基于 vite 和 vue3-ts

前往 tsconfig.json 修改 compilerOptions 选项：

{
   "compilerOptions": {
      "baseUrl": "./src",
      "paths": {
         "@/*": [
            "src/*"
         ]
      }
   }
}

然后安装 pnpm add -D @types/node，安装后就可以导入 path typescript 提示，
然后在 vite.config.ts 里添加 resolve，如下：

做完这步之后下面还有最后一步，不要忘记!

import path from 'path'

export default defineConfig({
    resolve: {
        alias: {
            "@": path.resolve("./src"),
        },
    },
})

最后重启 typescript 服务：

  1. 如果是 VSCode 的话重启 VSCode；
  2. 如果是 WebStorm 的话，ctrl+shift+p 输入 Restart Typescript Service 按下 Enter 即可；