設定ファイル

16.1.1. 全体設定例

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

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

  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },

  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },

  build: {
    target: 'es2015',
    outDir: 'dist',
    sourcemap: false,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'pinia'],
        },
      },
    },
  },
})

---

16.1.2. 設定原則

• @ aliasをsrc/ディレクトリにマッピングします。相対パス（../../）は使用しません。
• 開発サーバーのAPIプロキシはバックエンドサーバーのアドレスに設定します。
• ビルドtargetはes2015に設定し、モダンブラウザをサポートします。

---

16.1.3. プラグイン設定

• @vitejs/plugin-vueは必須です。
• 追加プラグインはプロジェクトの要件に応じて設定します。

プラグイン	用途	必須有無
@vitejs/plugin-vue	Vue SFCサポート	必須
vite-plugin-vue-devtools	開発時デバッグツール	推奨
rollup-plugin-visualizer	バンドル分析	任意

---

16.1.4. プロキシ設定

開発環境でCORS問題を防止するためにAPIプロキシを設定します。

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
    },
    '/ws': {
      target: 'ws://localhost:8080',
      ws: true,
    },
  },
},

• プロダクション環境ではリバースプロキシ（Nginxなど）を使用します。
• プロキシパスはバックエンドAPIパスと一致するように設定します。