Viteの便利な小ネタ

はじめに

ViteはVueやReactなどのフレームワークに使われるモダンなビルドツールです。開発者にとって非常に便利な機能がたくさんありますが、その中でも特に便利な小ネタについて紹介します。

便利な小ネタ

1. importの相対パスの省略

import文で相対パスを書くのは少し面倒です。Viteでは、@を指定することでsrcディレクトリを指定できます。例えば、src/components/Button.vueをインポートする場合は、次のように書けます。

import Button from '@/components/Button.vue';

2. SVGファイルのインポート

SVGファイルを柔軟にインポートするために、Viteではvue-svg-loaderがデフォルトで使われます。例えば、src/assets/logo.svgをインポートする場合は、次のように書けます。

import Logo from '@/assets/logo.svg';

また、<img>タグで使う場合は、次のように書けます。

<template>
  <img src="~@/assets/logo.svg" alt="logo">
</template>

3. Iconifyを使ったアイコンの簡単な追加

アイコンを使う場合、アイコンパッケージをインストールして、インポートする必要がありますが、Viteでは、Iconifyを使うことで、簡単にアイコンを追加できます。

まず、次のコマンドを使って@iconify/iconifyをインストールします。

npm i -D @iconify/iconify

そして、アイコンを使う場合は、次のように書けます。

<template>
  <iconify-icon icon="dashicons:admin-post" />
</template>

<script>
import IconifyIcon from '@iconify/vue';

export default {
  components: {
    IconifyIcon,
  },
};
</script>

4. .envファイルを使った環境変数の設定

開発時に環境変数を設定することはよくありますが、安全な環境で保管する必要があります。Viteでは、.envファイルを使って環境変数を設定できます。

まず、.envファイルを作成し、次のように環境変数を設定します。

VITE_API_URL=https://api.example.com

次に、環境変数を使う場合は、import.meta.envオブジェクトを使います。例えば、VITE_API_URLを使う場合は、次のように書けます。

const apiUrl = import.meta.env.VITE_API_URL;

注意点として、.envファイルで設定された環境変数は、vite buildでビルドした場合には、動作しません。そのため、本番環境で環境変数を設定する場合は、別途設定する必要があります。

まとめ

Viteは、開発者にとって非常に便利な機能がたくさんあります。その中でも、importの省略やSVGファイルのインポート、Iconifyを使ったアイコンの追加、.envファイルを使った環境変数の設定など、小ネタとして覚えておくと役立ちます。いかがでしたでしょうか。