viteでimportのエイリアス設定

viteでimportのエイリアスを設定

エイリアス設定

vite.cofig.ts

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

エイリアスを使ってimportしてみる

import { Index } from '@components/index';

エイリアスでimportできるようになった。

問題発生

が、VsCode上では、モジュールが見つからないと言われた

Cannot find module '@components/index' or its corresponding type declarations.

解決

tsconfig.jsonにも設定してあげないといけないらしい。

tsconfig.json

	"compilerOptions": {

		"baseUrl": ".",
		"paths": {
			"@/*": ["src/*"],
			"@components/*": ["src/components/*"]
		}
  }

解決！