对于NUXT和PHP都在一个项目（小型项目）中

Question

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

我猜我缺少一些简单的东西，但到目前为止，我有一种有效的方法。现在，我在/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文件并将其放入/dist的文档根目录，但这破坏了nuxt.config.js中Axios的API代理设置。

我真的不想安装某些PHP软件包（我已经看到Laravel有一个与Nuxt兼容的软件包），因为这样做的目的只是为了在我的Nuxt项目中包含几个PHP文件，而不是一个PHP文件。完整的图书馆。任何人都对我所缺少的东西有什么见识，以使这项工作更好？

Answer 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。

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

1 个答案:

对于NUXT和PHP都在一个项目（小型项目）中