如何从Laravel后端获取数据并在Vue / Nuxt前端中显示

Question

我有一个Vue / Nuxt前端，该前端可以正常运行，而Laravel后端连接到我的数据库。

我的问题是如何连接两者并在Vue页面中显示数据库中的数据。

如果我使用php artisan serve运行该应用程序，则会从数据库中获取正确的数据，但无法使用Nuxt / Vue的页面转换和纯组件刷新。如果我使用npm run dev运行该应用程序，则会得到页面转换和仅包含组件的刷新，但是从我的Axios请求返回的数据是发送页面的HTML。

因此，我假设这是某种异步问题，但是我对此很陌生，不知道该怎么办。

任何技巧或建议都会有很大帮助。

Axios请求：

created() {
    const { data } = this.$axios
      .get("/items")
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  },

我还没有包括我的控制器，模型等，因为它可以通过Laravel服务器运行，所以我假设它们设置正确。不过，如果需要，我可以将它们编辑到帖子中。

Answer 1

您必须使用软件包dotenv。然后在nuxt.config.js的第一行：

require("dotenv").config()

这是我在nuxt.config.js中的axios设置：

/*
   ** Axios configuration
   */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
    baseURL: process.env.BASE_URL,
    headers: {
      common: {
        Accept: "application/json"
      }
    }
  },

这对我来说很好。如果仍然无法接收API数据，请从开发人员工具中检入“网络”标签。检查是否触发了任何请求，如果触发，则检查URL和响应（如果有）。