前言

• 在 vue2 中，使用 @ 表示 src 目录，而在 Vite + Vue3 的项目中，需要我们自己去配置，否则会报错；
  • 报错信息：
    • 不管是 ts 还是 js，报错信息一样；
• 给孩子点点关注吧！😭

一、准备工作

1.1 下载需要的包 - @types/node

• 下载命令：二选一
  • yarn add @types/node；
  • npm install @types/node；

🔺 二、输入 @ 自动联想 src 目录

• 别名路径联想提示：
  • 在编写代码的过程中，一旦输入 @/，VsCode会立刻 联想出src下的所有子目录和文件，统一文件路径访问不容易出错；
• 在项目根目录下新增jsconfig.json 文件；（项目在启动的时候，会自动读取这个文件）；
• 🔺 注意：
  • 此处的配置，只起 提示作用；
  • 真正的路径转换在vite.config.js中；
• 添加 json 格式的配置项：

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

• 配置完成后，重启项目即可。

三、Vite + Vue3 + TS 配置

3.1 配置 tsconfig.json 文件

• 在 compilerOptions 配置项中增加 baseUrl 及 paths 配置；

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

3.2 在 vite.config.ts 文件中配置

• 以下两种方式二选一即可；
• 方式一：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import { resolve } from 'path'
  
  export default defineConfig({
      plugins: [vue()],
      resolve: {
          alias: [
              {
                  find: '@',
                  replacement: resolve(__dirname, './src')
              }
          ]
      }
  })
  

• 方式二：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import { resolve } from 'path'
  
  export default defineConfig({
      plugins: [vue()],
      resolve: {
          alias:{
              "@": resolve(__dirname, "./src")
          }
      }
  })
  

四、Vite + Vue3 + JS 配置

4.1 在 vite.config.js 文件中配置

• 方式一：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import { resolve } from 'path'
  
  export default defineConfig({
      plugins: [vue()],
      resolve: {
          alias: [
              {
                  find: '@',
                  replacement: resolve(__dirname, './src')
              }
          ]
      }
  })
  

• 方式二：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import { resolve } from 'path'
  
  export default defineConfig({
      plugins: [vue()],
      resolve: {
          alias:{
              "@": resolve(__dirname, "./src")
          }
      }
  })