Vue 3 别名设置与IDE自动识别@符号

 

VS Code默认不识别@符号，也不能自动补全，参考以下配置

 

 

一、配置vite alias

1、安装

npm install --save @types/node

 

注意：默认安装最新的，可能不兼容，尽量安装本地node相同版本

比如：npm install --save @types/node@16

 

 

2、修改 vite.config.ts

添加path等，参考以下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'  // 新增

// 新增
const resolve = (p: string) => {
  return path.resolve(__dirname, p);
}


// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': resolve('./src')
    }
  },
  plugins: [vue()]
})

 

二、IDE自动识别@

修改tsconfig.json

  // lib添加以下路径
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }