javascript - 在 Nuxt JS 中为 Axios 配置本地 php 端点
问题描述
我想使用 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
到/static
我的 Nuxt 项目中的目录。
到目前为止,它有效。但是,它需要设置 MAMP 才能拥有hosts
条目,而当涉及到 时npm run build
,这种方法会失败,因为构建将从中获取 PHP 文件/static
并将它们放在 的 docroot 中/dist
,但这会破坏 Axios 中的 API 代理设置nuxt.config.js
.
我真的不想安装一些 PHP 包(我已经看到 Laravel 有一个可以与 Nuxt 一起使用的包),因为目标只是能够在我的 Nuxt 项目中拥有几个 PHP 文件,而不是一个完整的库。任何人都知道我缺少什么以使这项工作更好吗?
解决方案
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 将可用。
推荐阅读
- apache-spark - 如何从 spark-submit 访问 Spark Kubernetes 集群上的 kubectl 转发端口?
- laravel - 调用数组上的成员函数 getRealPath()
- sql - SQL DATEDIFF 函数返回错误值
- c# - 将脚本添加到游戏对象时,只运行一次循环
- charts - 当图表数据为空时,如何在 High Stock 图表中显示网格线?
- python - 为什么上下文管理器在产生后关闭?
- arduino - Arduino AccelStepper 库:即时速度永远不会达到设定速度
- ios - 这个文档页面是用什么语言编码的?
- excel - 如何在同一行代码中包含列和行范围?
- css - 如何给形状赋予边框?