Возможно ли объединить несколько приложений переднего плана, одно в vue, а другое в реакцию, с одним интерфейсом laravel? - PullRequest
Новая
       14

Возможно ли объединить несколько приложений переднего плана, одно в vue, а другое в реакцию, с одним интерфейсом laravel?

0 голосов
/ 22 апреля 2019

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

1 Ответ

0 голосов
/ 22 апреля 2019

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

...