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

【问题标题】：How to integrate Laravel API and VueJs project to a single URL/Project?如何将 Laravel API 和 VueJs 项目集成到单个 URL/项目？
【发布时间】：2019-08-15 07:56:27
【问题描述】：

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

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

【问题讨论】：

这被称为使用 nginx 作为代理。阅读 NGINX 中的上游服务 - 通常这意味着有一个 / 位置指向您的 VueJS nodejs 服务器，以及 /api 被路由到您的 PHP 项目
这是一篇使用 docker 的文章（但可以很容易地重写为仅支持原生 PHP）medium.com/@francoisromain/…
把你的 vue-project 放到 public 文件夹里？
好的，谢谢大家的回复。我一回到家就试试你的建议。
你解决了吗？我也有同样的要求

标签： php laravel vue.js integration

【解决方案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以便更好地理解

【讨论】：