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

Question

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

如何将两者联系起来？

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

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

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

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

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

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

Answer 1

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

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

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

Answer 2

假设在浏览器中访问 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)
  })

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

让我们保持更新！

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

How to properly connect Nuxt.js with a laravel backend?

laravel

vuejs2

nuxt.js

laravel-6