なぜ、vite.config.tsが初期設定で存在しないのか？

Viteを初期化した際にvite.config.tsが存在しないのは、Viteがシンプルなデフォルト設定を使用しているためです。多くの基本的なプロジェクトでは、特に設定ファイルを必要とせずに動作します。ただし、プロジェクトに特定の設定が必要になった場合や、プラグインを追加したい場合にはvite.config.tsを作成します。

`vite.config.ts`の作成方法

プロジェクトのルートディレクトリに移動します。
vite.config.tsファイルを作成します。

touch vite.config.ts

基本的な`vite.config.ts`の内容

vite.config.tsは、プロジェクトの設定を定義するファイルです。最小限の設定ファイルの例を示します。

import { defineConfig } from 'vite';

export default defineConfig({
  // 基本的な設定
});

以下は、いくつかの一般的な設定例です。

1. プラグインの追加

Viteはプラグインをサポートしています。例えば、Vueのプラグインを追加する場合は次のようにします。

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

export default defineConfig({
  plugins: [vue()],
});

2. エイリアスの設定

プロジェクト内のパスを簡略化するためのエイリアス設定も可能です。

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
});

3. 環境変数の設定

環境変数を管理するために、Viteは.envファイルをサポートしています。例えば、APIのベースURLを設定する場合：

VITE_API_URL=https://api.example.com

これをvite.config.ts内で使用することも可能です。

import { defineConfig } from 'vite';

export default defineConfig({
  define: {
    'process.env': {
      VITE_API_URL: process.env.VITE_API_URL
    }
  }
});

4. CSSのプリプロセッサ設定

例えば、Sassを使用する場合の設定です。

import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      },
    },
  },
});