Vite+Vue3+TS(2)配置@表示src目录

查看 Vue 项目初始化自带的 HelloWorld 例子，首先在 <script> 标签中导入 HelloWorld.vue，然后在 <template> 标签中作为组件进行使用

<script setup lang="ts">
import HelloWorld from ./components/HelloWorld.vue
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template>

导入时，使用了相对路径 ./components/HelloWorld.vue，路径比较深时，使用相对路径就会不太直观，使用绝对路径更方便。

目前在 Vue 项目中比较通用的做法是：使用 @ 表示 src 目录，引入时就可以使用 @/components/HelloWorld.vue，不管引入文件在任何地方，都可以使用这个路径进行引入。但是这个用法并不被默认支持，需要通过一番配置才可以正常使用。

配置 @ 表示 src 目录

加载 path 依赖

yarn add path

配置 vite.config.ts 文件，在 resolve 选项中配置一个 alias 别名

import {
          
    resolve } from "path"

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

此时，已经可以完成编译，将导入地址调整为 @/components/HelloWorld.vue，可以看到界面可以正常展示，说明 @ 符号已经生效。

但是如果有使用 @ 导入 .ts 文件时，VS Code 会提示找不到路径，虽然不影响编译，但是看着难受。

配置 tsconfig.json 文件，在 compilerOptions 选择中增加 baseUrl 及 paths 配置

{
          
   
    "compilerOptions": {
          
   
        // ...省略其它配置项
        "baseUrl": ".",
        "paths": {
          
   
            "@/*": [ "src/*" ]
        }
    }
}