目的

在以前的版本中曾經使用過以 @ 代替 ./src 的語法，但是在新的版本突然不支援了，於是去查了一下該如何加到專案中。

方法

需要在兩個檔案中建立 alias，分別是 tsconfig.json 和 vite.config.ts。

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
  // 省略...
  // 重點
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  // 重點
  }
}

// vite.config.ts
export default defineConfig({
    plugins: [vue()],
  // 重點
    resolve: {
        alias: {
            '@': '/src'
        }
    }
  // 重點
})

如何 import

// ts file
import {router} from "@/router.ts";

// component
import App from '@/App.vue'

結語

真的好方便好直觀，喜歡😀