Работа с конфигурационными файлами и скриптами Vue

Введение

Вы работаете с проектом на Vue и неизбежно сталкиваетесь с файлами конфигурации и пользовательскими скриптами. Эти элементы — не только опорные точки вашей инфраструктуры, но и ключ к быстрой, гибкой и удобной разработке. Чтобы избежать проблем в продакшене и не тратить время на рутину, важно понимать: зачем нужны различные конфигурационные файлы, как они взаимодействуют друг с другом и как использовать скрипты для автоматизации задач. Давайте разберем работу с конфигами и скриптами в Vue-проектах — от первых шагов до продвинутых примеров.

Разновидности конфигурационных файлов в Vue-проектах

package.json — сердце любого npm-проекта

Каждый проект на Vue начинается с package.json. Это основной файл для Node.js-экосистемы, но в контексте Vue здесь сразу становится видно, какие зависимости нужны, какие команды запускать и как определяется поведение проекта.

Вот пример блока scripts в package.json:

"scripts": {
  "serve": "vue-cli-service serve", // Запуск проекта в режиме разработки
  "build": "vue-cli-service build", // Сборка production-версии проекта
  "lint": "vue-cli-service lint",   // Линтинг кода на соответствие стилю
  "test:unit": "vue-cli-service test:unit" // Запуск юнит-тестов
}

Благодаря этим скриптам вы быстро развернете и соберете ваш фронтенд. Каждый скрипт можно адаптировать под свои задачи. Например, вместо стандартной команды serve вы можете добавить опции, как показано ниже:

"scripts": {
  "dev": "vue-cli-service serve --port 8081 --open" // Запустит dev-сервер на порту 8081 и откроет браузер
}

Настройка конфигурационных файлов и создание кастомных скриптов — важный аспект разработки во Vue.js. Понимание того, как правильно настраивать проект и оптимизировать сборку, позволит вам создавать более эффективные и гибкие приложения. Если вы хотите детальнее погрузиться в Vue.js, изучить основы, компоненты, свойства и события, реактивность, жизненный цикл, а также научиться работать с Vue Router и Pinia, приходите на наш большой курс Vue.js 3, Vue Router и Pinia. На курсе 173 уроков и 21 упражнение, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

vue.config.js — кастомизация сборки

Если вы используете Vue CLI, этот файл даёт огромное поле для манёвра. Он появляется в корне проекта и позволяет без вмешательства в webpack напрямую настраивать магию сборки.

Вот пример минимального конфиг-файла:

// vue.config.js

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/prod-path/' // Путь для production-билда
    : '/',          // Путь для разработки
  outputDir: 'dist', // Куда собирать вашу сборку
  devServer: {
    port: 3000,     // Порт dev-сервера
    open: true      // Открывать ли браузер после запуска
  },
  lintOnSave: false // Не запускать линтер при сохранении файлов
}

Смотрите, этот файл легко расширяется. Например, добавим ручные конфиги Webpack:

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@img': path.resolve(__dirname, 'src/assets/images'), // Свой алиас для импортов
      }
    }
  }
}

.env-файлы — управление окружением

Чтобы переключаться между development и production, принято использовать файлы окружения:

• .env
• .env.development
• .env.production

В этих файлах удобно хранить переменные, которые влияют на разные аспекты приложения.

Пример .env.production:

VUE_APP_API_URL=https://api.myapp.com
VUE_APP_SOME_KEY=prodValue

А теперь используем в компоненте:

// Vue-компонент
const apiUrl = process.env.VUE_APP_API_URL;
// Теперь вы можете обращаться к apiUrl для запросов

Обратите внимание, что переменные должны начинаться с VUE_APP_, иначе во время сборки они не попадут в ваш фронтенд-код.

tsconfig.json для проектов на TypeScript

Если вы работаете с Vue + TypeScript, для корректной работы редактора и сборки нужен tsconfig.json.

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "isolatedModules": true,
    "strict": true
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

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

.eslintrc.js и другие инструменты качества

Линтеры помогают поддерживать стиль и качество кода постоянными. Конфиг-файл может быть в формате .eslintrc.json или .eslintrc.js. Пример настройки:

// .eslintrc.js

module.exports = {
  root: true,
  env: { browser: true, node: true },
  extends: [
    'plugin:vue/vue3-essential', // Базовые правила для Vue 3
    'eslint:recommended'
  ],
  rules: {
    'no-console': 'warn', // Консоль допускается только с предупреждением
    'vue/max-attributes-per-line': ['error', { singleline: 3 }]
  }
}

Кастомные и стандартные скрипты

Запуск и изменение стандартных скриптов

Как только вы создали новый проект (например, через Vue CLI или Vite), у вас уже имеются базовые команды: serve, build, lint.

Запускайте их из командной строки:

npm run serve   // Локальный сервер разработки
npm run build   // Сборка проекта
npm run lint    // Линтинг файлов

Часто разработчикам требуется комбинировать задачи или добавлять свои. Например, вы хотите одновременно запускать сервер и открывать проект в браузере:

"scripts": {
  "start": "npm run serve -- --open"
}

Обратите внимание: для передачи опций внутренней команде используется двойной дефис --.

Создание собственных скриптов

Допустим, вам нужно регулярно копировать какие-то файлы или выполнять чистку перед сборкой. Можно использовать скрипты npm напрямую:

"scripts": {
  "prebuild": "rimraf dist", // Удаление папки dist перед сборкой
  "build": "vue-cli-service build", // Основная сборка
  "postbuild": "node ./scripts/copy-assets.js" // Дополнительный скрипт после сборки
}

Покажу, как выглядит простой скрипт на Node.js для копирования файлов:

// scripts/copy-assets.js

const fs = require('fs-extra'); // Нужно установить fs-extra через npm
fs.copySync('src/static', 'dist/static'); // Копирует папку со статикой из src в dist
console.log('Static assets copied!');

Встраивание скриптов в pipeline

Часто появляется необходимость объединять несколько команд. С помощью логических операторов вы управляете порядком выполнения:

"scripts": {
  "analyze": "npm run build && npm run analyze:bundle",
  "analyze:bundle": "webpack-bundle-analyzer dist/report.html",
  "lint:fix": "vue-cli-service lint --fix"
}

• && — запустит следующую команду, только если предыдущая завершилась успешно.
• || — запустит при неудаче предыдущей.

Попробуйте комбинировать команды — это очень удобно!

Vue CLI, Vite и конфигурационные нюансы

Vue CLI и его структура

Vue CLI абстрагирует структуру проекта, генерируя множество файлов автоматически. Здесь важную роль играют:

• babel.config.js
• vue.config.js
• Дополнительные плагины CLI

Всё работает “из коробки”, но вы всегда можете настроить структуру. Например, для поддержки кастомных плагинов Webpack:

// vue.config.js

module.exports = {
  chainWebpack: config => {
    config.plugin('define') // Работаем с встроенными DefinePlugin
      .tap(args => {
        args[0]['__VUE_OPTIONS_API__'] = true;
        return args;
      });
  }
}

Vite — современная альтернатива

С Vite основным конфигом становится vite.config.js (или .ts). Здесь проще настраивать алиасы, плагины, прокси и транспиляцию.

Посмотрите, как добавляются пользовательские переменные окружения:

// vite.config.js

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

export default defineConfig({
  plugins: [vue()],
  define: {
    __APP_VERSION__: JSON.stringify('1.0.0')
  },
  resolve: {
    alias: { '@': '/src' }
  },
  server: {
    port: 4000,
    proxy: {
      '/api': 'http://localhost:5000'
    }
  }
})

Переменная __APP_VERSION__ будет доступна при сборке во всем приложении.

Особенность Vite: для переменных среды вместо VUE_APP_ используется просто VITE_. Например, VITE_API_URL.

Сценарии для непрерывной интеграции

При работе в крупных командах часто появляются файлы для CI/CD. Они лежат вне структуры Vue, но влияют на вашу сборку:

• .github/workflows/* — для GitHub Actions
• .gitlab-ci.yml — для GitLab CI

Вот простой пример workflow для GitHub Actions:

name: Build and Deploy

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Установка Node.js
      uses: actions/setup-node@v3
      with:
        node-version: 16
    - name: Установка зависимостей
      run: npm ci
    - name: Сборка проекта
      run: npm run build

Вы можете добавлять собственные команды, которые уже настроили в package.json.

Передача кастомных параметров при сборке

Часто требуется передавать переменные только на этапе сборки. Когда вы работаете с Vue CLI, используйте переменные окружения или аргументы командной строки:

"scripts": {
  "build:staging": "VUE_APP_STAGE=staging vue-cli-service build"
}

В Vite используется другой синтаксис:

"scripts": {
  "build:staging": "VITE_STAGE=staging vite build"
}

Здесь я показываю, как добавить свою среду для промежуточного стенда или отдельного региона.

Расширенные примеры и рекомендации

Отключение sourcemaps для production

Если не хотите публиковать исходники (например, для большей безопасности), используйте настройку:

Vue CLI:

// vue.config.js
module.exports = {
  productionSourceMap: false // Отключит sourcemap при сборке
}

Vite:

// vite.config.js
export default defineConfig({
  build: {
    sourcemap: false
  }
})

Импорт переменных среды из .env

Если вы используете как .env, так и .env.production или .env.development, npm скрипты сами определяют нужный файл. Главное — правильно задайте переменные. Вот пример чтения переменной среды:

// В компоненте
const key = import.meta.env.VITE_SOME_KEY
// Теперь можно использовать в логике компонента

Использование разных конфигов для eslint и stylelint

Крупные проекты часто включают и проверку CSS/SCSS стилей. Используйте отдельный конфиг:

// package.json
"scripts": {
  "lint:css": "stylelint 'src/**/*.scss'"
}

Создайте файл .stylelintrc.json:

{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": 2,
    "color-no-invalid-hex": true
  }
}

Теперь, если запустить npm run lint:css, весь ваш CSS пройдет проверку.

Полезные npm-пакеты для кастомизации

Вот несколько утилит, которые упростят автоматизацию и настройку:

• rimraf — быстрое удаление папок (альтернатива rm -rf)
• cross-env — для кроссплатформенного задания переменных окружения
• npm-run-all — чтобы запускать несколько скриптов параллельно или последовательно
• concurrently — другие варианты параллельного запуска скриптов

Например, чтобы кроссплатформенно запускать сборку с переменной, пишите:

"scripts": {
  "build:staging": "cross-env VUE_APP_STAGE=staging vue-cli-service build"
}

Теперь команда будет работать и в Windows, и в Linux/MacOS.

Итоги

Работа с конфигурационными файлами и пользовательскими скриптами в Vue — ваш путь к гибкости и масштабируемости проекта. Через package.json, vue.config.js, .env, а также за счет своих скриптов и команд вы получаете полный контроль над сборкой, статикой, проверками качества, работой с окружениями и автоматизацией. Старайтесь сделать свой рабочий процесс управляемым через конфиги: это проще поддерживать, расширять и документировать, а автоматизация рутинных задач помогает сосредоточиться на действительно важных деталях вашего Vue-приложения.

Освоение работы с конфигурационными файлами и скриптами поможет вам настроить проект в соответствии с вашими потребностями. В первых 3 модулях курса Vue.js 3, Vue Router и Pinia уже доступно бесплатное содержание — начните погружаться в мир Vue.js и конфигурации прямо сейчас.

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

Как добавить собственный скрипт для генерации SVG-спрайтов в Vue-проекте?

Создайте Node.js-скрипт (например, generate-sprite.js) с использованием пакета, такого как svg-sprite. Добавьте в package.json:

"scripts": {
  "sprite": "node scripts/generate-sprite.js"
}

Теперь запуск команды npm run sprite сгенерирует спрайт-файл.

Почему переменная из .env не видна в компоненте Vue?

Проверьте, начинается ли переменная с VUE_APP_ (для Vue CLI) или с VITE_ (для Vite), иначе она не попадёт в конечное приложение. Пересоберите проект после изменения переменных.

Как использовать разные настройки линтера для production и разработки?

В конфиге линтера (.eslintrc.js) используйте overrides или читайте переменные окружения через process.env.NODE_ENV для настройки правил в зависимости от среды.

Как добавить поддержку алиасов в Vite для вложенных путей?

В vite.config.js добавьте алиас:

resolve: {
  alias: {
    '@comps': '/src/components',
    '@assets': '/src/assets'
  }
}

Теперь можно импортировать файлы через @comps/MyButton.vue внутри проекта.

Как настроить автоматический запуск линтера и тестов перед коммитом?

Добавьте пакет husky и настройте его на pre-commit хук:

npx husky init
npm install lint-staged --save-dev

В package.json пропишите:

"lint-staged": {
  "src/**/*.{js,vue}": "eslint"
}

Теперь перед каждым коммитом будет происходить проверка файлов согласно вашим настройкам.