Как правильно соединить Nuxt.js с бэкэндом laravel? - PullRequest
Новая
       32

Как правильно соединить Nuxt.js с бэкэндом laravel?

0 голосов
/ 29 октября 2019

Я начинаю новый проект, Nuxt.js для внешнего интерфейса и Laravel для внутреннего интерфейса.

Как мне соединить два?

Я установил новый проект Nuxt с помощью create-nuxt-app и новый проект laravel.

Насколько я могуискал, я решил, что мне нужны переменные окружения. В моем проекте nuxt я добавил пакет dotenv и поместил новый файл .env в корень проекта nuxt.

И добавил CORS в свой проект laravel, поскольку я получаю сообщение об ошибке.

Переменные внутри действительно доступны из проекта, и я использую их следующим образом: 

APP_NAME=TestProjectName
API_URL=http://127.0.0.1:8000

И обращаюсь к нему так: process.env.APP_NAME etc '

Для выполнения HTTP-вызовов я использую официальный модуль Axios nuxt.js, а для его тестирования я использовал его в одном из компонентов, поставляемых по умолчанию.

Бэкэнд: 

Route::get('/', function () {
    return "Hello from Laravel API";
});

и изнутри компонента: 


   console.log(process.env.API_URL)//Gives 127.0.0.1:8000

    //But this gives undefined 
   this.$axios.$get(process.env.API_URL).then((response) => {
   console.log(response);
  });
 }

Что я здесь не так делаю? Я попытался описать мои настройки и проблемы как можно лучше. Если я что-то упустил, скажите, пожалуйста, и я обновлю свой вопрос. Спасибо.

Ответы [ 2 ]

1 голос
/ 29 октября 2019

Считая само собой разумеющимся, что при посещении https://127.0.0.1:8000/ в вашем браузере вы получите ожидаемый ответ, давайте посмотрим, что может быть не так во внешнем интерфейсе:

Сначала вы должны убедиться, что модуль axios инициализированправильно. Ваш файл nuxt.config.js должен включать в себя следующее 

//inclusion of module
 modules: [
    '@nuxtjs/axios',
    <other modules>,
    ],
//configuration of module
  axios: {
    baseURL: process.env.API_URL,
  },

Имейте в виду, что в зависимости от жизненного цикла компонента ваш запрос axios может происходить на стороне клиента (после рендеринга на стороне сервера), где адрес127.0.0.1 может быть недействительным. Я бы посоветовал вам избегать использования 127.0.0.1 или localhost при определении api_uris и предпочитать использовать локальный сетевой ip для локального тестирования.

После настройки модуля axios, как описано выше, вы можете делать запросы в своих компонентах, используя только относительные api uris: 

  this.$axios.$get('/').then(response => {
    console.log(response)
  }).catch(err => {
    console.error(err)
  })

Во время тестирования, если это работает, очень полезно открыть dev вашего браузераИнструменты> вкладка сеть и проверьте состояние запроса. Если вы все еще не получили ответ, есть вероятность, что вы получите больше информации либо из раздела catch, либо из статуса запроса из инструментов разработчика.

Держите нас в курсе!

0 голосов
/ 29 октября 2019

Nuxt имеет структуру файла маршрутизации, чтобы упростить настройку рендеринга на стороне сервера, а также помочь с удобством сопровождения. Это может привести к тому, что Laravel и Nuxt будут бороться за маршрутизацию, вам нужно настроить это, чтобы он работал правильно.

Я бы посоветовал вам использовать Laravel-Nuxt, так как многие из этих мелких проблем для вас решены.

https://github.com/cretueusebiu/laravel-nuxt

...