Переход с Vue-CLI на Vite: ускоряем разработку Vue 328.01.2024 19:00

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

Как ускорить разработку Vue-приложений с помощью Vite: от проекта на Vue-CLI к новым возможностям Vue 3

Использование Vite вместе с Yarn позволяет значительно ускорить процесс разработки Vue-приложений по сравнению с использованием Webpack и Vue-CLI. Благодаря быстрому запуску и горячей перезагрузке изменений, разработчики могут экономить много времени и повышать эффективность своей работы.

Пункт 1. Изменение package.json

В первую очередь необходимо удалить все зависимости, связанные с @vue/cli, ведь они нам больше не понадобятся.

- "@vue/cli-plugin-babel": "~5.0.0",
- "@vue/cli-plugin-eslint": "~5.0.0",
- "@vue/cli-plugin-router": "~5.0.0",
- "@vue/cli-plugin-vuex": "~5.0.0",
- "@vue/cli-service": "~5.0.0",
. . .

И вместо них добавить модуль Vite и его плагин для Vue 3.

+ "vite": "^5.0.10", 
+ "@vitejs/plugin-vue ": "^4.5.2", 

Сам Vite поддерживает только современные браузеры, поэтому мы можем спокойно избавиться от Babel, удалив все зависимости и файл с конфигом — babel.config.js.

- "babel-eslint": "^10.1.0", 
- "babel-runtime": "^6.26.0",

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

- "node-sass": "^4.12.0", 
- "sass-loader": "^10.0.2",

+ "sass": "^1.70.0",

Пункт 2. Перемещение index.html

Vite использует другой подход к структуре проекта, где index.html находится в корне проекта, а не в папке public, как многие привыкли. Это позволяет упростить настройку сервера разработки и ускорить процесс разработки.

Для использования статических активов, таких как изображения или CSS-файлы, нужно использовать простой / вместо <%= BASE_URL %>, как это было в Vue CLI.

Пукнт 3. Настройка main.js

Файл main.js все продолжает оставаться в папке /src, но для запуска проекта в Vite необходимо внести некоторые изменения в этот файл.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

Здесь мы импортируем функцию createApp из библиотеки Vue и передаем ей компонент App, который мы определили в файле App.vue. Затем мы вызываем метод mount на созданном экземпляре приложения и передаем ему селектор элемента DOM, в котором мы хотим отображать приложение.

Пункт 4. Настройка конфигурации Vite.js

Для продолжения настройки проекта в Vite необходимо удалить файл vue.config.js из корня проекта и создать новый файл vite.config.js.

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))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/assets/scss/index.scss";`
      }
    }
  },
})

Пункт 5. Изменение скриптов для запуска с Yarn

На этом этапе необходимо изменить существующие скрипты для запуска проекта, чтобы использовать Yarn вместо npm.

"scripts": {
  "dev": "vite --open",
  "build": "vite build",
  "preview": "vite preview",
  "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
},

© Habrahabr.ru