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
ファイルを使った環境変数の設定など、小ネタとして覚えておくと役立ちます。いかがでしたでしょうか。