在vite中配置路径别名

引言

在项目中导入文件的时候，使用@符号表示src/比使用相对路径导入文件会方便很多，而使用vite创建的vue项目，不能直接使用@符号表示src/，需要我们添加一些配置，让vscode认识@符号并给出提示以及让vite能够识别出@符号。

一、让vscode认识@符号

修改tsconfig.json,增加如下配置:

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

二、让vite识别@符号

安装node的类型声明文件

 npm i  @types/node -D

在vite.config.ts中增加配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 这里使用nodejs的模块，可能会报错，需要安装node的类型声明文件
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})