Vite + Vue3 + TypeScriptでAlias pathを設定する方法

はじめに

vueやreact、svelteでコンポーネントを呼び出す際、相対パスでimportを記述していませんか？

そうしていると、コンポーネントの整理をしている中で動かない箇所が出てきます。
1つ1つチェックするのは非常に手間なので、Aliasを設定して楽をしましょう～

./srcを@に設定

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'                     // ・・・・追加

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

これでもアプリケーションは動くが、TypeScriptのチェックが通らないので、
tsconfig.jsonも修正する。

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    ・ // 
    ・ // 省略
    ・ // 
    "baseUrl": "./src",  // ・・・・追加
    "paths": {           // ・・・・追加
      "@/*": [           // ・・・・追加
        "./*"            // ・・・・追加
      ]                  // ・・・・追加
    }                    // ・・・・追加
  }
}

OK