Как интегрировать Laravel API и проект VueJs в один URL / проект? - PullRequest
0 голосов
/ 25 марта 2019

У меня есть API, созданный с использованием Laravel, доступ к которому можно получить через URL: http://www.project.com/api с использованием виртуального хоста, в котором http://www.project.com/ указывает на общую папку проекта Laravel. У меня также есть отдельный проект Vue, созданный с использованием Vue CLI, который подключается и запрашивает данные для API Laravel и может быть доступен через http://localhost:8080/.

У меня вопрос, могу ли я объединить 2 отдельных проекта в один проект или URL и если да, то как?

1 Ответ

0 голосов
/ 25 марта 2019

Laravel выходит из коробки с Laravel Mix, который вы можете использовать для компиляции вашего проекта Vue, и обслуживаете его через Laravel.

Вот шаги, чтобы сделать это.

  1. Сначала вы копируете весь проект Vue в /resources/render (вы можете изменить render на что угодно).

  2. Перейдите в корневую папку 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');
    
  3. Создать блейд-файл в качестве точки входа в 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>
    
  4. Перейдите к своему routes/web.php и укажите только этот маршрут. Он будет обрабатывать все маршруты в вашем приложении Vue

    Route::get('{path}', function () {
      return view('index');
    })->where('path', '^(.+)?$');
    
  5. Запустите npm install и npm run watch, чтобы создать и отреагировать на изменения, внесенные в приложение Vue. (Возможно, вы захотите удалить нежелательные зависимости из package.json)

У меня есть похожий проект с этой настройкой. Вы можете увидеть это здесь для лучшего понимания

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...