在 Nuxt JS 中为 Axios 配置本地 php 端点

Posted 2023-02-22

【中文标题】在 Nuxt JS 中为 Axios 配置本地 php 端点

【英文标题】：Configure local php endpoint for Axios in Nuxt JS

【发布时间】：2019-12-13 12:23:05

【问题描述】：

我想使用 Axios 进行指向本地 php 文件的客户端 AJAX 调用。为什么选择 PHP？我在一个简单的基于 PHP 的 API 中有大量经过安全测试的方法，这些方法效果很好，不需要重新发明。

我猜我遗漏了一些简单的东西，但到目前为止，我已经有了一种可行的不稳定/hacky 方法。现在，我在 /static 文件夹中有一个 PHP 文件，在 nuxt.config.js 我有一个代理设置：

... other config stuff 
axios: 
    proxy: true
,
proxy: 
    '/api': 'http://some-site.local/api.php'

... other config stuff 

为了解析上面的 url，我通过 MAMP 设置了一个主机条目，它将 http://some-site.local 解析为我的 Nuxt 项目中的 /static 目录。

到目前为止，它有效。但是，它需要将 MAMP 设置为具有 hosts 条目，当涉及到 npm run build 时，此方法会失败，因为构建将从 /static 获取 PHP 文件并将它们放入 @987654329 的 docroot @，但这会破坏 nuxt.config.js 中 Axios 的 API 代理设置。

我真的不想安装一些 PHP 包（我已经看到 Laravel 有一个可以与 Nuxt 一起使用的包），因为我的目标只是能够在我的 Nuxt 项目中包含几个 PHP 文件，而不是一个完整的图书馆。任何人都知道我缺少什么以使这项工作更好吗？

【参考方案1】：

NUXT 和 PHP 多合一项目（小项目）

假设已经安装了 Node 和 PHP-CLI。

创建NUXT项目：

npx create-nuxt-app my-app

创建文件static/api/index.php（比如说）：

<?php
header('Content-type: application/json; charset=utf-8');
$rawPaylaod = file_get_contents('php://input');

try 
  $payload = json_decode($rawPaylaod, true);
 catch (Exception $e) 
  die(json_encode(['error' => 'Payload problem.']));


echo json_encode([
  'echo' => $payload,
]);

安装依赖

npm i -D concurrently
npm i @nuxtjs/axios @nuxtjs/proxy

更新config.nuxt.js：

module.exports = 
  ...

  modules: [
    ...
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
  ],

  ...

  proxy: 
    '/api': 
      target: 'http://localhost:8000',
      pathRewrite: 
        '^/api' : '/'
      
    ,
  ,

  axios: 
    baseURL: '/',
  ,

更新package.json：

"dev": "concurrently -k \"cross-env NODE_ENV=development nodemon server/index.js --watch server\" \"php -S 0.0.0.0:8000 static/api/index.php\"",

它已经准备好了。

由于代理和在路径下部署后，现在本地开发 API 将可用。

【讨论】：

感谢您发布此信息。我检查并安装了依赖项（包括我需要的cross-env），但是当我尝试启动时出现错误：“错误：在/Users/xxxxxxxx/Sites/..../server/index 中找不到构建文件.js/.nuxt/dist/server。使用nuxt build 或builder.build() 或在开发模式下启动nuxt。”我将 dev 命令更改为 "dev": "concurrently -k \"nuxt --\" \"php -S 0.0.0.0:8000 static/api/index.php\"" 但它仍然无法正常工作。 PHP 确实在触发，但应用程序无法正确加载。是 package.json 中 dev 命令中的内容吗？