Question

我有一个使用Laravel创建的API，可以使用虚拟主机通过URL http://www.project.com/api进行访问，其中http://www.project.com/指向Laravel项目的公用文件夹。我还使用Vue CLI创建了一个单独的Vue项目，该项目将数据连接到Laravel API并向其请求数据，并且可以通过http://localhost:8080/进行访问。

我的问题是，我可以将2个单独的项目集成到一个项目或URL中吗？如果可以，怎么办？

Answer 1

Laravel与Laravel Mix开箱即用，可用于编译Vue项目并通过Laravel提供。

这是执行此操作的步骤。

首先，您将整个Vue项目复制到/resources/render（可以将render更改为您喜欢的任何内容）。

转到您的Laravel根文件夹，打开名为webpack.mix.js的文件，并将其更改为这样

const mix = require('laravel-mix');

// Assuming your Vue entry point is index.js
mix.js('resources/render/index.js', 'public/js');

在resources/views中创建一个刀片文件作为入口点。就我而言，它是main.blade.php。

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Laravel</title>
</head>
<body>
  <div id="app">
    {{-- Content --}}
  </div>
</body>
<script type="application/javascript" src="{{ mix('js/app.js') }}"></script>
</html>

转到您的routes/web.php并仅输入此路由。它将处理您Vue应用中的所有路由
```
Route::get('{path}', function () {
  return view('index');
})->where('path', '^(.+)?$');
```
运行npm install和npm run watch来构建并响应您对Vue应用所做的更改。（您可能想从package.json中删除不需要的依赖项）

我有与此设置类似的项目。您可以here查看它，以更好地了解

如何将Laravel API和VueJs项目集成到单个URL /项目中？

1 个答案: