Настройка и сборка проектов Vue с использованием современных инструментов

Введение

Создание современного фронтенд-приложения на Vue требует грамотной организации процесса сборки и настройки рабочего окружения. Последние версии Vue (особенно Vue 3) предлагают несколько инструментов, с помощью которых можно существенно упростить разработку, тестирование и развёртывание приложений. Современные подходы позволяют ускорить сборку, уменьшить итоговый размер бандла и повысить удобство работы с проектом.

В этой статье я расскажу, как с нуля настроить рабочее пространство для проекта на Vue, какие инструменты использовать, как правильно организовать сборку, оптимизировать приложение и сделать процесс разработки максимально комфортным. Разберём разные сборщики (Vite и Webpack), подключение TypeScript, использование линтеров и многое другое. Всё будет сопровождаться конкретными примерами, чтобы вы могли уверенно внедрять лучшие практики в свои задачи.

Старт нового проекта: выбор инструмента

Почему важно выбирать современный инструмент сборки

От выбора построителя проекта зависит не только скорость сборки, но и доступность новых возможностей фреймворка, поддержка модулей, удобство работы с зависимостями, сохранность читаемого кода и даже опыт команды. Сегодня есть два популярных варианта — это Vite и Vue CLI. Оба поддерживают современные стандарты, но имеют свои особенности.

Краткое сравнение

• Vue CLI — классический инструмент, построенный на Webpack, заслуженно популярен, давно используется на большинстве проектов.
• Vite — новый сборщик от одного из ключевых разработчиков Vue, фокусируется на быстроте запуска и "горячей" замене модулей.

Вот как вы можете их сравнить на практике:

Как создать проект с использованием Vite

Быстрее всего стартовать с Vite, так что покажу как это выглядит на практике:

npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install

• Здесь npm create vite@latest — команда для создания нового шаблона с помощью Vite.
• --template vue — выбирает шаблон Vue 3.

Для убедительности: если хотите использовать шаблон с TypeScript, достаточно указать --template vue-ts.

Как создать проект через Vue CLI

Если вы выбрали Vue CLI по привычке или для интеграции на старых проектах:

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app
npm run serve

В процессе vue create вы получите интерактивное меню, где удобно выбрать нужные плагины, типы тестирования, поддержку TypeScript.

Организация структуры проекта и основные файлы

Давайте кратко посмотрим, что вы получаете "из коробки" в каждом из подходов:

my-vue-app/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── package.json
├── vite.config.js или vue.config.js
└── README.md

Посмотрите внимательно на главный файл entry point — теперь он чаще всего main.js или main.ts (для TypeScript). Каждый компонент (.vue файлы) состоит из блоков <template>, <script> и <style>.

Конфигурирование сборки

Настройка Vite для Vue

Vite по умолчанию уже настроен под Vue, осталось только добавить необходимые плагины, если нужны дополнительные фичи.

vite.config.js — главное место для кастомизации

Выглядит он так:

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

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,   // Порт dev-сервера
    open: true    // Открыть браузер сразу
  },
  build: {
    outDir: 'dist', // Папка для итоговой сборки
    sourcemap: true // Генерировать исходные карты
  }
})

• В секции server настраиваете дев-сервер — указываете порт, открытие браузера и т.д.
• В секции build — путь вывода, создание sourcemaps и другие параметры.

Конфиг Webpack через Vue CLI

Если вы хотите повлиять на webpack-конфигурацию, используйте файл vue.config.js в корне:

module.exports = {
  devServer: {
    port: 8080,
    open: true
  },
  configureWebpack: {
    devtool: 'source-map',   // Для отладки исходного кода
    output: {
      filename: 'bundle.js'
    }
  }
}

• Опции devServer аналогичны Vite.
• Через configureWebpack можно расширять базовую конфигурацию Webpack.

Обратите внимание

Если специфичные опции не поддерживаются на верхнем уровне Vue CLI, используйте функцию вместо объекта, что даёт больше контроля над Webpack:

module.exports = {
  configureWebpack: (config) => {
    config.plugins.push(/* ваш плагин */)
  }
}

Как работать с TypeScript в Vue-проектах

Современная практика всё чаще склоняется к использованию TypeScript для типобезопасности и удобства автодополнения.

Подключение TypeScript в проект Vite

Если проект создан как --template vue-ts, всё подключено сразу. Если нет — добавьте TypeScript так:

npm install --save-dev typescript @types/node
npm install --save-dev vue-tsc

Добавьте файл конфигурации TypeScript:

// tsconfig.json
{
  "extends": "@vue/tsconfig/tsconfig.json",
  "include": ["src/**/*.ts", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

В Vite обязательно проверьте, установлен ли плагин для поддержки TypeScript:

import vue from '@vitejs/plugin-vue'
// Всё подключено автоматически, если выбрали vue-ts

Как добавить Composition API с типами

В современных проектах рекомендуют использовать Composition API:

<script setup lang="ts">
import { ref } from 'vue'

const count = ref<number>(0)

function increment() {
  count.value++
}
</script>

• Благодаря lang="ts" весь скрипт тут на TypeScript.

Использование линтеров и форматтеров

Когда проект становится больше, удобно иметь инструменты, поддерживающие единый стиль кода.

Как добавить ESLint и Prettier

В случае Vite или Vue CLI всё просто:

npm install --save-dev eslint eslint-plugin-vue @vue/eslint-config-typescript
# Для Prettier:
npm install --save-dev prettier eslint-config-prettier

Создайте .eslintrc.js:

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/typescript'
  ]
}

Для Prettier — .prettierrc:

{
  "singleQuote": true,
  "trailingComma": "es5"
}

Добавьте npm-скрипты в package.json:

"scripts": {
  "lint": "eslint --ext .js,.ts,.vue src"
}

• После этого при запуске npm run lint будут проверяться все нужные файлы.
• Prettier часто используют с расширениями для редактора кода.

Автоматизация и оптимизация сборки

Использование алиасов для сокращения путей

Например, чтобы не писать громоздкие импорты:

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

Тогда вы можете импортировать любые файлы относительно src, например:

import MyComponent from '@/components/MyComponent.vue'

Аналогичная настройка есть и в vue.config.js:

const path = require('path')

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
}

Оптимизация бандла

Собранный проект лучше минифицировать и делить на чанки, чтобы ускорить загрузку:

• Vite по умолчанию использует rollup для минификации.
• В Webpack настройки минификации включены по умолчанию в режиме production.

Пример кастомизации чанков для более эффективной загрузки:

// vite.config.js, необязательно
build: {
  rollupOptions: {
    output: {
      manualChunks(id) {
        if (id.includes('node_modules')) {
          return 'vendor'
        }
      }
    }
  }
}

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

Для разных конфигураций удобно использовать .env файлы:

VITE_API_URL=https://example.com/api

В коде использовать так:

const apiUrl = import.meta.env.VITE_API_URL

В Vue CLI префикс будет VUE_APP_API_URL.

Как запускать, тестировать, собирать проект

Запуск дев-сервера

Для Vite:

npm run dev

Для Vue CLI:

npm run serve

Сборка для продакшена

• Для Vite:

npm run build

• Для Vue CLI:

npm run build

После этого итоговая сборка появится в папке dist.

Запуск линтеров и тестов

Как правило:

npm run lint
npm run test:unit

• Тесты можно подключить через Jest, Vitest или Mocha.
• Для Vite отлично интегрируется Vitest:

npm install --save-dev vitest

• Для запуска:

npx vitest

Расширение возможностей: плагины и дополнительные инструменты

Плагины Vite

Vite поддерживает множество плагинов: работа с SVG, автогенерация роутов, интеграция PWA.

Пример подключения плагина для использования SVG как компонента:

npm install vite-svg-loader --save-dev

В vite.config.js:

import svgLoader from 'vite-svg-loader'

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

Теперь вы можете делать:

<template>
  <LogoIcon /> <!-- SVG импортируется как компонент -->
</template>

<script setup>
import LogoIcon from './assets/logo.svg'
</script>

Использование переменных SCSS и PostCSS

Часто нужно глобально переопределять css-переменные или миксины. В Vite (vite.config.js):

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

В vue.config.js примерно то же самое:

css: {
  loaderOptions: {
    sass: {
      additionalData: `@import "@/styles/variables.scss";`
    }
  }
}

Заключение

Сборка и настройка Vue-проекта сегодня — задача, которую можно решить быстро и удобно благодаря современным инструментам Vite и Vue CLI. Выбор между ними зависит от ваших предпочтений, специфики приложения и привычек команды. В статье я показал основные этапы конфигурации, подключение TypeScript, настройку линтеров и форматтеров, управление переменными окружения, оптимизацию бандла и расширение возможностей с помощью плагинов. Всё это позволяет вам создавать масштабируемые и поддерживаемые приложения, которые удобно разрабатывать и быстро развёртывать.

Частозадаваемые технические вопросы по теме статьи и ответы на них

Вопрос 1. Как подключить Proxy для API-запросов во время разработки на Vite?

Добавьте настройку proxy в vite.config.js:

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

Запросы к /api/ будут автоматически перенаправляться на backend.

Вопрос 2. Как правильно организовать импорт глобальных стилей в Vue 3 + Vite?

Лучше всего подключать глобальные стили в entry-файле, например, в main.js:

import '@/styles/global.scss'

Также можно использовать параметр additionalData для глобального импорта SCSS-переменных (см. основной текст выше).

Вопрос 3. Как добавить поддержку PWA в проекте на Vite?

Установите плагин:

npm install vite-plugin-pwa --save-dev

Добавьте его в конфиг:

import { VitePWA } from 'vite-plugin-pwa'
plugins: [vue(), VitePWA()]

Далее настройте манифест и сервис воркер по необходимости.

Вопрос 4. Почему появляются ошибки “Failed to resolve module” при импорте компонентов?

Часто причина — неправильный указатель пути. Используйте алиасы, обязательно проверьте правильность регистра (в linux-пути чувствительны к регистру символов). Если используете TypeScript, убедитесь, что алиас прописан также в tsconfig.json в разделе compilerOptions.paths.

Вопрос 5. Как ускорить сборку большого проекта на Vue CLI (Webpack)?

Попробуйте:

• Включить кэширование и параллелизм:
  cache: true в vue.config.js или оптимизация через thread-loader.
• Разбить сборку на чанки с помощью SplitChunks в настройках Webpack.
• Использовать плагин webpack-bundle-analyzer для анализа веса бандов и удаления лишнего из сборки.
• Убедиться, что не собираются неиспользуемые зависимости и компоненты подключения динамически (Lazy loading).