Для совмещения Vite и Yii2 вам необходимо выполнить несколько шагов. Ниже я приведу подробную инструкцию, которая поможет вам настроить проект с использованием обоих инструментов.
- Настройка Yii2:
- Установите Yii2, если он еще не установлен, с помощью Composer:
composer create-project --prefer-dist yiisoft/yii2-app-basic <название_папки>
- Перейдите в папку проекта (
cd <название_папки>
) и установите все зависимости:composer install
- Запустите веб-сервер Yii2:
./yii serve
- Настройка Vite:
- Установите Vite глобально с помощью npm:
npm install -g create-vite
- Создайте новый проект Vite:
create-vite <название_папки>
- Установите зависимости проекта:
cd <название_папки> && npm install
- Настройка прокси:
- В файле
vite.config.js
(по умолчанию находится в корневой папке Vite-проекта) добавьте следующую конфигурацию:
export default { // ...другие настройки Vite... server: { proxy: { '/api': 'http://localhost:8080', // замените localhost:8080 на ваш адрес сервера Yii2 }, }, }
- Создание Vue компонентов:
- Создайте необходимые Vue компоненты в папке
src/components
вашего Vite проекта.
- Использование компонентов в Yii2:
- В папке
views
вашего проекта Yii2 создайте новый файлvue.php
. - В этом файле подключите сгенерированный Vite-бандл с помощью тега
<script>
:
<script type="module"> import App from '/dist/main.js'; // путь до вашего сгенерированного Vite-бандла const app = Vue.createApp(App); app.mount('#app'); </script>
- Запуск проекта:
- Запустите сервер Vite:
npm run dev
из корневой папки вашего Vite проекта. - Перейдите по адресу
http://localhost:8080/vue
(предполагая, что yii serve работает на порту 8080).
Таким образом, вы настроили интеграцию между Vite и Yii2. Vite будет обрабатывать и собирать ваши Vue компоненты, а Yii2 будет отвечать за серверную часть приложения. Вы сможете разрабатывать и отлаживать вашу frontend-часть в среде Vite, а затем внедрить ее в вашу Yii2-приложение без проблем.