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

Question

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

这是我的路线/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/目录中，然后使用npm run dev或npm run watch扩展到公共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>