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/*"]
    }