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

Question

我有一个 Vue/Nuxt 前端，它可以正常工作，还有一个连接到我的数据库的 Laravel 后端。

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

如果我使用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 和可能的响应（如果有）。