⚡

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

2022/08/08に公開

Vue.js

Vite

tech

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';
+ import path from 'path';

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

参考:

Discussion