Viteでimportの@エイリアスが利かないときの解決法

Vite環境でimportのパスに@エイリアスが使用できず少しはまったので解決方法のメモです。

以下のようにパスを設定できるようにします。

// Before
import { moduleA } from '../../moduleA';
// After
import { moduleA } from '@/src/moduleA';

Viteの環境構築は公式に従います。
最初の Vite プロジェクトを生成する

また

• Vite + Vue3 + TypeScript
• Vite + TypeScript

で設定方法が違ったため、2パターン記載しています。

Vite + Vue3 + TypeScript

環境を構築する

1. 任意のディレクトリでnpm create vite@latestを実行
2. Vue を選択
3. TypeScript を選択
4. npm install

npm run devを実行し表示されたURLにアクセスして画面が表示されたらOKです。

tsconfigの設定

まずimportのパスに@を使用できるようにします。
tsconfig.json、tsconfig.app.json、tsconfig.node.jsonの３つありややこしいですが、

• tsconfig.app.json
  • "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
  • こちらはtsはもとよりvueファイルをTypeScriptで書くための設定ファイル
• tsconfig.node.json
  • "include": ["vite.config.ts"]
  • こちらはviteの設定ファイルをTypeScriptで書くための設定ファイル
• tsconfig.json
  • 2つのts.xxx.jsonを集約する

というすみわけです。
ということなので、tsconfig.app.jsonに以下を追加します。

{
  "compilerOptions": {
    // 追加
    "paths": {
     "@/*": ["./*"]
    },
    ...省略
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

Viteの設定

"paths"の設定はあくまでTypeScriptのコード間でimportの解決をしてくれるだけのようで、実行時のパスはそのまま'@/src/moduleA'となってしまうようです。

vite.config.tsにresolveを追加します。

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
});

これで再度npm run devを実行するとパスが解決されてエラーがなくなります。

Vite + TypeScript

Vite環境を構築する

1. 任意のディレクトリでnpm create vite@latestを実行
2. vanilla を選択
3. TypeScript を選択
4. npm install

npm run devを実行し表示されたURLにアクセスして画面が表示されたらOKです。

tsconfigの設定

まずimportのパスに@を使用できるようにするため、tsconfigに"paths"の設定を追加します。

{
  "compilerOptions": {
    // 追加
    "paths": {
     "@/*": ["./*"]
    },
    ...省略
  },
  "include": ["src"]
}

Viteの設定

vite-tsconfig-pathsをインストール

"paths"の設定はあくまでTypeScriptのコード間でimportの解決をしてくれるだけのようで、実行時のパスはそのまま'@/src/moduleA'となってしまうようです。

これはTypeScriptの仕様みたいなので、実行時のパスの解決のためvite-tsconfig-pathsをインストールします。

npm install --save-dev vite-tsconfig-paths

つづいてvite.config.tsを追加します。

import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [tsconfigPaths()],
});

これで再度npm run devを実行するとパスが解決されてエラーがなくなります。

参考サイト