Question

我继承了一个laravel代码库，该代码库通过laravel-mix集成了一个vue应用程序（在资源/资产/ js内部）。我被要求使用react开发一些前端功能。我想知道是否可以配置webpack.mix.js和laravel路由，以便可以将react应用程序集成到laravel应用程序中，而不会影响vue应用程序。

Answer 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文件链接到刀片文件中，如下所示：

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

是否可以通过一个laravel后端集成多个前端应用程序（一个在vue中，另一个在反应中）？

1 个答案: