Vue Academy · Урок

Настройка CLI и плагины

Настройте CLI и добавьте плагины, чтобы расширить возможности проекта

Урок 3 из 313 шагов

«Настройка CLI и плагины» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.

Настройка сборки

И Vue CLI, и Vite позволяют настраивать сборку с помощью файла конфигурации.

Vue CLI использует vue.config.js
Vite использует vite.config.js

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

Основы vite.config.js

Обычно в vite.config.js импортируется плагин Vue и экспортируется объект конфигурации.

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

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000
  }
})

Основы vue.config.js

В проектах Vue CLI файл vue.config.js аналогичным образом экспортирует конфигурацию.

const { defineConfig } = require("@vue/cli-service")

module.exports = defineConfig({
  devServer: {
    port: 8080
  }
})

Добавление плагинов

Плагины расширяют сборку новыми возможностями.

Установите их с помощью npm
Импортируйте их в файл конфигурации
Добавьте их в массив plugins

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import vueJsx from "@vitejs/plugin-vue-jsx"

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

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

Храните настройки, меняющиеся в разных окружениях, в файлах .env.

.env загружается везде
.env.development используется только при разработке
.env.production используется для сборок production

Определение переменных окружения

В Vite имена переменных должны начинаться с VITE_, чтобы эти переменные были доступны клиентскому коду.

# .env file
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App

Чтение переменных окружения

В Vite получайте доступные переменные через import.meta.env.

const apiUrl = import.meta.env.VITE_API_URL
console.log(apiUrl)
// https://api.example.com

Примечание о безопасности переменных окружения

Всё, что доступно клиентскому коду, видно в браузере.

Никогда не помещайте секреты, например закрытые ключи API, в переменные VITE_
Здесь должны находиться только общедоступные настройки, не содержащие конфиденциальных данных
Храните настоящие секреты на сервере

Псевдонимы путей

Псевдоним сокращает пути импорта. Обычно символ @ связывают с папкой src.

Это позволяет избежать хрупких относительных путей вроде ../../components.

import { fileURLToPath, URL } from "node:url"
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    }
  }
})

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

После настройки импортируйте модули из @/ вместо относительных путей.

// Without alias
import Button from "../../components/Button.vue"

// With @ alias
import Button from "@/components/Button.vue"

Параметры сервера разработки

В файле конфигурации также можно настроить сервер разработки:

port — порт, на котором сервер будет принимать подключения
open — автоматическое открытие браузера
proxy — перенаправление запросов API для устранения проблем с CORS

export default defineConfig({
  server: {
    port: 3000,
    open: true,
    proxy: {
      "/api": "http://localhost:8000"
    }
  }
})

Быстрая проверка

Проверьте, насколько хорошо вы понимаете конфигурацию Vite.

Ответь в интерактивном уроке

Итоги: конфигурация и плагины

Вы научились настраивать проект Vue:

vite.config.js или vue.config.js содержат настройки
Добавляйте плагины в массив plugins
Используйте файлы .env с префиксом VITE_
Читайте их через import.meta.env
Задавайте псевдоним @ для удобного импорта

Далее вы изучите синтаксис шаблонов и привязку данных.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 42
Уроки: 156

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Настройка CLI и плагины» бесплатный?

Да — полный текст урока «Настройка CLI и плагины» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.

Чему я научусь в уроке «Настройка CLI и плагины»?

Настройте CLI и добавьте плагины, чтобы расширить возможности проекта Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 3.

Сколько времени занимает урок «Настройка CLI и плагины»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy