Можно ли интегрировать несколько клиентских приложений, одно в vue, а другое в React, с одним бэкендом laravel?

Я унаследовал базу кода laravel, в которую интегрировано приложение vue (внутри ресурсов / ресурсов / js) через laravel-mix. Меня просят разработать некоторую интерфейсную функцию с реакцией. Я хочу знать, могу ли я настроить webpack.mix.js и маршруты laravel, чтобы приложение реакции можно было интегрировать в приложение laravel, не затрагивая приложение vue.


reactjs vue.js laravel laravel-mix
person faint-hearted-fool    schedule 22.04.2019    source источник
comment
В общем: да, можно. Вы можете предоставить единый API и использовать его как в приложениях Vue, так и в React.   -  person Tarasovych    schedule 22.04.2019
comment
Это не ограничение Laravel. При создании проекта Laravel он разрешает выбор / поддержку предустановок для Angular, React, Vue или чего-то еще ... Ваш проект находится во Vue, поэтому я предлагаю вам изучить Vue вместо того, чтобы смешивать его. Хотя, если вы настаиваете, вы можете смешивать Vue и React следующим образом: github.com/akxcv/vuera   -  person Noogen    schedule 22.04.2019
comment
@Noogen, приложение vue не связано с приложением реакции, над которым я работаю. Моей целью было добавить функцию реагирования, не касаясь уже существующего приложения vue. И да, смешивать их в одной функции, вероятно, плохая идея. Итак, я действительно мог делать именно то, что хотел. Мне просто пришлось сказать laravel-mix скомпилировать соответствующие файлы js и css для разделения мест назначения, дать им отдельные маршруты в web.php, связать файлы js и css соответствующим образом в шаблонах лезвий, поместить их исходные коды в отдельные js и sass в папке resource / assets, и все работало нормально.   -  person faint-hearted-fool    schedule 22.04.2019

Ответы (1)


arrow_upward
1
arrow_downward

Итак, вот как я решил свой вопрос и успешно интегрировал два отдельных приложения для реагирования и одно приложение 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 были связаны в файлах лезвий следующим образом:

...
    <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.

person faint-hearted-fool    schedule 22.04.2019