Проксирование запросов через server.proxy

Конфигурация в Vite представляет собой центральную точку управления поведением dev-сервера, сборки, плагинов, путей, переменных окружения и интеграций. Несмотря на минималистичный подход Vite, конфигурационный файл способен управлять практически всеми аспектами процесса разработки и production-сборки.

По умолчанию Vite автоматически ищет файл:

vite.config.js

Также поддерживаются варианты:

vite.config.mjs
vite.config.cjs
vite.config.ts
vite.config.mts
vite.config.cts

Наиболее распространённым вариантом в современных проектах является:

vite.config.ts

Использование TypeScript даёт:

  • автодополнение;
  • типизацию конфигурации;
  • проверку ошибок;
  • удобную навигацию в IDE;
  • корректную работу с API Vite.

Базовая структура конфигурации

Минимальный пример:

import { defineConfig } from 'vite'

export default defineConfig({
})

Конфигурация экспортируется как объект.

Функция defineConfig() необязательна, однако она значительно улучшает поддержку типов и работу редактора.

Без неё:

export default {
  server: {
    port: 3000
  }
}

С ней:

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    port: 3000
  }
})

Почему используется defineConfig

Функция defineConfig() не изменяет конфигурацию логически. Она служит типизированной оболочкой.

Основные преимущества:

Поддержка IntelliSense

IDE начинает понимать структуру Vite API:

defineConfig({
  build: {
    sourcemap: true
  }
})

Редактор показывает:

  • допустимые свойства;
  • типы параметров;
  • документацию;
  • предупреждения об ошибках.

Проверка неправильных параметров

Ошибка:

defineConfig({
  servr: {
    port: 3000
  }
})

IDE сразу покажет:

Property 'servr' does not exist

Удобство при сложных конфигурациях

При большом количестве настроек типизация особенно полезна:

defineConfig({
  resolve: {
    alias: {
      '@': '/src'
    }
  },

  build: {
    chunkSizeWarningLimit: 1000
  },

  server: {
    strictPort: true
  }
})

Экспорт конфигурации

Vite поддерживает несколько вариантов экспорта.

Прямой объект

export default defineConfig({
  server: {
    port: 5173
  }
})

Это наиболее простой вариант.

Функция конфигурации

Конфигурация может экспортироваться как функция:

export default defineConfig(() => {
  return {
    server: {
      port: 3000
    }
  }
})

Подобный подход используется при:

  • условной настройке;
  • разделении production/development;
  • чтении переменных окружения;
  • динамической генерации конфигурации.

Асинхронная конфигурация

Vite поддерживает async-конфигурации:

export default defineConfig(async () => {
  const data = await loadSomething()

  return {
    define: {
      DATA: JSON.stringify(data)
    }
  }
})

Объект параметров функции конфигурации

Если экспортируется функция, Vite передаёт специальный объект:

export default defineConfig(({ command, mode, isSsrBuild }) => {
  console.log(command)
  console.log(mode)

  return {}
})

Свойство command

Показывает тип запуска:

command === 'serve'

или:

command === 'build'

Пример:

export default defineConfig(({ command }) => {
  if (command === 'serve') {
    return {
      server: {
        port: 3000
      }
    }
  }

  return {
    build: {
      minify: 'esbuild'
    }
  }
})

Свойство mode

Определяет текущий режим:

vite --mode development
vite --mode production
vite --mode staging

Пример:

export default defineConfig(({ mode }) => {
  if (mode === 'staging') {
    return {
      base: '/staging/'
    }
  }

  return {}
})

Свойство isSsrBuild

Используется при SSR-сборке:

export default defineConfig(({ isSsrBuild }) => {
  return {
    build: {
      sourcemap: isSsrBuild
    }
  }
})

Форматы конфигурации

JavaScript

// vite.config.js

import { defineConfig } from 'vite'

export default defineConfig({
})

TypeScript

// vite.config.ts

import { defineConfig } from 'vite'

export default defineConfig({
})

Наиболее рекомендуемый формат.

ESM

// vite.config.mjs

import { defineConfig } from 'vite'

export default defineConfig({
})

CommonJS

// vite.config.cjs

const { defineConfig } = require('vite')

module.exports = defineConfig({
})

Приоритет загрузки конфигурации

Vite ищет конфигурацию в следующем порядке:

  1. CLI-параметр --config
  2. vite.config.ts
  3. vite.config.mts
  4. vite.config.js
  5. vite.config.mjs
  6. vite.config.cjs
  7. vite.config.cts

Использование –config

Можно явно указать файл:

vite --config configs/vite.dev.js

Production:

vite build --config configs/vite.prod.js

Раздел server

Управляет dev-сервером.

Изменение порта

export default defineConfig({
  server: {
    port: 3000
  }
})

host

По умолчанию Vite доступен только локально.

Для доступа из сети:

server: {
  host: true
}

или:

server: {
  host: '0.0.0.0'
}

strictPort

Если порт занят, Vite автоматически ищет следующий.

Запрет автоматической смены:

server: {
  port: 3000,
  strictPort: true
}

Теперь Vite завершится ошибкой.

open

Автоматическое открытие браузера:

server: {
  open: true
}

Можно указать путь:

server: {
  open: '/admin'
}

HTTPS

Включение HTTPS:

server: {
  https: true
}

Настройка сертификатов:

import fs from 'fs'

export default defineConfig({
  server: {
    https: {
      key: fs.readFileSync('./ssl/key.pem'),
      cert: fs.readFileSync('./ssl/cert.pem')
    }
  }
})

Proxy

Проксирование API:

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

Запрос:

/api/users

будет перенаправлен на:

http://localhost:8000/api/users

Перезапись пути

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8000',
      rewrite: path => path.replace(/^\/api/, '')
    }
  }
}

Теперь:

/api/users

станет:

/users

Раздел resolve

Управляет разрешением модулей.

alias

Самая популярная настройка.

Без alias:

import Button from '../. ./. ./components/Button'

С alias:

import Button from '@/components/Button'

Конфигурация:

import path from 'path'

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

dedupe

Устранение дублирования пакетов:

resolve: {
  dedupe: ['react']
}

Особенно важно при monorepo.

extensions

Список автоматически разрешаемых расширений:

resolve: {
  extensions: ['.js', '.ts', '.jsx', '.tsx']
}

Раздел build

Настройки production-сборки.

outDir

Папка результата:

build: {
  outDir: 'dist'
}

assetsDir

Каталог ассетов:

build: {
  assetsDir: 'assets'
}

sourcemap

Генерация source map:

build: {
  sourcemap: true
}

Варианты:

sourcemap: true
sourcemap: false
sourcemap: 'inline'
sourcemap: 'hidden'

minify

Минификация:

build: {
  minify: 'esbuild'
}

или:

build: {
  minify: 'terser'
}

Отключение:

build: {
  minify: false
}

target

Целевые браузеры:

build: {
  target: 'es2018'
}

cssCodeSplit

Разделение CSS:

build: {
  cssCodeSplit: true
}

assetsInlineLimit

Лимит inline-файлов:

build: {
  assetsInlineLimit: 4096
}

Маленькие файлы будут превращены в base64.

chunkSizeWarningLimit

Лимит предупреждения:

build: {
  chunkSizeWarningLimit: 1000
}

Rollup-конфигурация

Vite использует Rollup для production-сборки.

rollupOptions

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['react']
      }
    }
  }
}

manualChunks

Ручное разделение чанков:

manualChunks(id) {
  if (id.includes('node_modules')) {
    return 'vendor'
  }
}

Настройка имён файлов

rollupOptions: {
  output: {
    entryFileNames: 'js/[name].js',
    chunkFileNames: 'js/[name].js',
    assetFileNames: 'assets/[name].[ext]'
  }
}

Раздел css

Настройки CSS-обработки.

modules

css: {
  modules: {
    scopeBehaviour: 'local'
  }
}

preprocessorOptions

SCSS:

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `
        @import "./src/styles/variables.scss";
      `
    }
  }
}

devSourcemap

Source map для CSS в dev-режиме:

css: {
  devSourcemap: true
}

Раздел define

Глобальные compile-time константы.

define: {
  __APP_VERSION__: JSON.stringify('1.0.0')
}

Использование:

console.log(__APP_VERSION__)

Раздел publicDir

Каталог статических файлов:

publicDir: 'public'

Файл:

public/logo.png

будет доступен:

/ logo.png

Раздел base

Базовый URL приложения.

Стандартный случай

base: '/'

Развёртывание в подпапке

base: '/admin/'

Теперь ресурсы:

<script src="/admin/assets/app.js">

CDN

base: 'https://cdn.example.com/'

Раздел plugins

Система плагинов — одна из важнейших частей Vite.

Подключение плагина

import vue from '@vitejs/plugin-vue'

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

Несколько плагинов

plugins: [
  vue(),
  legacy(),
  eslint()
]

Условное подключение

plugins: [
  mode === 'development' && inspect()
].filter(Boolean)

loadEnv

Функция загрузки env-переменных.

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())

  return {
    define: {
      __API_URL__: JSON.stringify(env.VITE_API_URL)
    }
  }
})

Переменные окружения

Поддерживаемые файлы

.env
.env.local
.env.development
.env.production

Префикс VITE_

Клиенту доступны только:

VITE_API_URL=

Не будут доступны:

SECRET_KEY=

Использование

console.log(import.meta.env.VITE_API_URL)

optimizeDeps

Настройки предварительной оптимизации зависимостей.

include

Принудительная оптимизация:

optimizeDeps: {
  include: ['lodash']
}

exclude

Исключение:

optimizeDeps: {
  exclude: ['large-library']
}

SSR-конфигурация

noExternal

ssr: {
  noExternal: ['some-package']
}

external

ssr: {
  external: ['package-name']
}

Worker-конфигурация

worker: {
  format: 'es'
}

Логирование

logLevel

logLevel: 'info'

Варианты:

info
warn
error
silent

Очистка экрана

clearScreen: false

envDir

Изменение каталога env-файлов:

envDir: './env'

cacheDir

Папка кеша:

cacheDir: 'node_modules/.vite'

appType

Тип приложения:

appType: 'spa'

Варианты:

spa
mpa
custom

Полноценная production-конфигурация

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

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())

  const isProd = mode === 'production'

  return {
    plugins: [
      vue()
    ],

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

    server: {
      host: true,
      port: 3000,
      strictPort: true
    },

    define: {
      __API_URL__: JSON.stringify(env.VITE_API_URL)
    },

    build: {
      sourcemap: !isProd,

      minify: 'esbuild',

      target: 'es2018',

      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.includes('node_modules')) {
              return 'vendor'
            }
          }
        }
      }
    }
  }
})
Оглавление