如何正确连接 Nuxt.js 与 laravel 后端？答案

【问题标题】：How to properly connect Nuxt.js with a laravel backend?如何正确连接 Nuxt.js 与 laravel 后端？
【发布时间】：2019-10-29 13:38:35
【问题描述】：

我正在开始一个新项目，Nuxt.js 用于前端，Laravel 用于后端。

如何将两者联系起来？

我已经使用 create-nuxt-app 安装了一个新的 Nuxt 项目，以及一个新的 laravel 项目。

据我搜索，我认为我需要某种环境变量。在我的 nuxt 项目中，我添加了 dotenv 包，并在 nuxt 项目的根目录下放置了一个新的 .env 文件。

并在我的 laravel 项目中添加了 CORS，因为我遇到了一个错误。

里面的变量确实可以从项目中访问，我正在使用它们像这样：

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

并像这样访问它： process.env.APP_NAME等'

为了进行 HTTP 调用，我使用的是 nuxt.js 的官方 Axios 模块，为了测试它，我在默认提供的组件之一中使用了它。

后端：

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);
  });
 }

我在这里做错了什么？我已尽力描述我的设置和问题。如果我忽略了什么，请告诉我，我会更新我的问题。谢谢。

【问题讨论】：

究竟什么是未定义的？
我得到的响应。 @piscator
您的路线是在web.php 或api.php 中定义的吗？对于api.php，您必须在所有路由中添加/api 前缀，即http://127.0.0.1:8000/api。您也可以尝试在浏览器中访问该 url，以确保路由存在。

标签： laravel vuejs2 nuxt.js laravel-6

【解决方案1】：

理所当然地在浏览器中访问 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 可能无效。我建议您在定义 api_uris 时避免使用 127.0.0.1 或 localhost，而更喜欢使用本地网络 ip 进行本地测试。

如上配置 axios 模块后，您可以只使用相对 api uris 在您的组件中发出请求：

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

在测试这是否可行时，打开浏览器的开发工具 > 网络选项卡并检查请求的状态非常有帮助。如果您仍然没有收到响应，您可能会从 catch 部分或开发工具的请求状态中获得更多信息。

让我们更新！

【讨论】：

我想我缺少的是 baseURL 的 axios 配置。这很好用，谢谢。
很高兴有帮助！

【解决方案2】：

Nuxt 有一个路由文件结构，可以轻松设置服务器端渲染，同时也有助于提高可维护性。这可能会导致 Laravel 和 Nuxt 争夺路由，您需要对其进行配置以使其正常工作。

我建议你使用 Laravel-Nuxt，因为很多这些小问题都会为你解决。

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

【讨论】：