Viteにさわる

Vue.js 3

Viteとは？

ViteはVue.jsの作者のEvan You氏が作成したビルドツール。 開発時は ES モジュールをそのままインポートするため、バンドル処理が不要で高速に動作するらしい。

インストール～開発サーバの起動

yarn create @vitejs/app vite-sample --template vue-ts
cd vite-sample
yarn
yarn dev

エイリアスを利用できるようにする

モジュールをインポートする際に下記のように@で絶対パスを指定したい

import HelloWorld from '@/components/HelloWorld.vue'

vite.config.tsを次のように変更する

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

↓

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"

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