如何部署 Laravel 5.4 API 和 Vue.js 2 项目？

Question

我使用 Laravel 5.4 创建了一个 API，并在不同域上使用 Vue.js 2 创建了前端。将 CORS 安装到 API。到这个时候，这一切都在我的本地机器上正常工作。我应该如何以正确的方式将它部署到托管服务器？我有 2 个文件夹：backend 和 frontend。在那里我实现了 2 个独立的项目：一个是 API，另一个是前端。

这是我的 routes/api.php

Route::group(['middleware' => ['jwt.auth']], function() {    
    Route::get('logout', 'AuthController@logout');
    Route::get('/requests', 'RequestController@index');
    Route::delete('/requests/{id}', 'RequestController@destroy');
});

Route::post('login', 'AuthController@login');
Route::post('register', 'AuthController@register');


Route::post('/requests', 'RequestController@create');

Route::get('/', function() {
    return response()->json([
        'success' => true
    ]);
});

Route::get('/hello', function() {
    return response()->json([
        'success' => true,
        'message' => 'API is working correctly.'
    ]);
});

Answer 1

您可能已经观察到 Laravel 预先配置为使用 Vue.js 作为其前端，您可以使用它来构建组件，然后使用 Webpack、Laravel-Mix、Babel 等构建或编译到您的 app.js 中。

正常的结构是你的 Laravel 代码，你的 api，位于 app 目录中，你的 Vue.js 和样式表构建在 resources/assets/ 目录中，然后使用 @987654323 构建到你的公共 html 目录中@或npm run watch等

要连接前端和后端，或在两者之间进行通信，您将使用某种形式的 XMLHttpRequest，也就是 Ajax。

Laravel 默认安装了 Axios 来满足你所有的 Ajax 需求。这是您要开始考虑对后端进行 api 调用的地方。

来自 Vue 的 Axios 请求看起来像这样。 （基于承诺）

axios.get('logout').then(//some function).catch(//some function);

这是一个向远程端点发出的简单 api 请求，它返回一个带有 {"message":"hello world"} 的 json 响应

Vue.component('example', {
	template: '#cool',
  data(){
  	return{
    	 requestData: {"message":"waiting for request..."},
    }
  },
  methods: {
    makeRequest(){
      axios.get('https://api.myjson.com/bins/xpk6h').then(function(response) {
          console.log(response.data.message); 
          this.requestData = response.data;
       }.bind(this));
    }
  },
});

const app = new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<div id="app">
    <example></example>
</div>


<template id="cool" functional>
      <div>
          <button @click="makeRequest">make api request</button>
          <p>{{requestData.message}}</p>
      </div>
 </template>