Vue + Vite環境でimportに@を使う

2022/08/07に公開約500字

Vue2 + Options APIからVue3 + <script setup>に乗り換えた際、ビルドツールもVue CLIからViteに乗り換えたのだが、Vue CLIで当たり前のように使っていたsrc@とするimport文のエイリアスが使えなくなっていた

vite.config.jsに以下の設定を追加することで解決した

vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

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

参考:

https://stackoverflow.com/questions/66043612/vue3-vite-project-alias-src-to-not-working
https://zenn.dev/kazuwombat/articles/9357f6b1ccca8c

Discussion

ログインするとコメントできます