#reactjs #laravel #vue.js #laravel-mix
#reactjs #laravel #vue.js #laravel-mix
Вопрос:
Я унаследовал базу кода laravel, в которую интегрировано приложение vue (внутри resources / assets / js) через laravel-mix. Меня попросили разработать некоторую интерфейсную функцию с помощью react. Я хочу знать, могу ли я настроить webpack.mix.js и маршруты laravel, чтобы приложение react можно было интегрировать в приложение laravel, не затрагивая приложение vue.
Комментарии:
1. В целом: да, это возможно. Вы можете предоставить единый API и использовать его как приложениями Vue, так и React.
2. Это не ограничение Laravel. При создании проекта Laravel он допускает поддержку выбора / предустановки для Angular, React, Vue или чего-либо еще… Ваш проект находится в Vue, поэтому я предлагаю вам изучить Vue вместо того, чтобы смешивать его. Хотя, если вы настаиваете, вы можете смешать Vue и React следующим образом: github.com/akxcv/vuera
3. @Noogen приложение vue оказалось не связанным с приложением react, над которым я работаю. Моей целью было добавить мою функцию react, не касаясь приложения vue, которое уже было там. И да, смешивать их в одной функции, вероятно, плохая идея. Итак, я действительно смог сделать именно то, что хотел. Я просто должен был сказать laravel-mix, чтобы скомпилировать соответствующие файлы js и css в отдельные пункты назначения, предоставить им отдельные маршруты в web.php , соответствующим образом связать файлы js и css в шаблонах блейда, поместить их исходные коды в отдельные папки js и sass в resource / assets, и все это сработало нормально.
Ответ №1:
Итак, вот как я решил свой собственный вопрос и успешно интегрировал два отдельных приложения react и одно приложение vue с серверной частью laravel.
Обновил мой webpack.mix.js файл следующим образом:
mix
.react("resources/assets/js-calendar/app.js", "public/js-calendar")
.sass("resources/assets/sass-calendar/app.scss", "public/css-calendar")
.react("resources/assets/js/app.js", "public/js")
.sass("resources/assets/sass/app.scss", "public/css")
.js("resources/assets/js-vue/app.js", "public/js-vue")
.sass("resources/assets/sass-vue/app.scss", "public/css-vue");
Содержимое моей resources/assets папки было:
├───js
│ └───components
├───js-calendar
│ └───components
├───js-vue
│ └───components
├───sass
├───sass-calendar
└───sass-vue
В моей resources/views папке были следующие три шаблона блейда:
app.blade.php hello.blade.php welcome.blade.php
И содержимое web.php файл был:
Route::view('/calendar/{path?}', 'app');
Route::view('vue/{path?}', 'hello');
Route::view('/{path?}', 'welcome');
И, наконец, скомпилированные файлы css и js были связаны в файлах blade следующим образом:
...
<link href="{{ asset('css-calendar/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="{{ asset('js-calendar/app.js') }}"></script>
....
Выше было для app.blade.php . Для hello.blade.php ссылки css и js src соответственно были css-vue/app.js и js-vue/app.js . И для welcome.blade.php ссылки src были css/app.css и js/app.js .
Обратите внимание, как yarn run dev генерируются соответствующие файлы css и js в разных местах назначения:
/js-calendar/app.js 9.45 MB 0 [emitted] [big] /js-calendar/app
/js/app.js 2.14 MB 1 [emitted] [big] /js/app
/js-vue/app.js 1.43 MB 2 [emitted] [big] /js-vue/app
/css-calendar/app.css 219 kB 2 [emitted] /js-vue/app
/css/app.css 219 kB 2 [emitted] /js-vue/app
/css-vue/app.css 219 kB 2 [emitted] /js-vue/app
У меня были как vue , так и react зависимости и их записи, добавленные в package.json .