正文 

当前位置： 首页 > 知识 >

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

     2023-02-22     25

关键词：

【中文标题】在 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 命令中的内容吗？

nuxt.js封装axios

1、安装axios　　cnpminstallaxios--save 2、在plugins文件夹下面创建service.jsimportaxiosfrom‘axios‘import{Message,Notification}from‘element-ui‘axios.defaults.headers[‘X-Requested-With‘]=‘XMLHttpRequest‘axios.def 查看详情

如何在 Vue.js/Nuxt.js 中为 RepositoryFactory 编写测试

】如何在Vue.js/Nuxt.js中为RepositoryFactory编写测试【英文标题】：HowtowritetestforRepositoryFactoryinVue.js/Nuxt.js【发布时间】：2022-01-2106:03:34【问题描述】：夏天我已经为Vue.js/Nuxt.js应用程序中的API连接实现了RepositoryFactory模式。https://medium... 查看详情

如何在 Nuxt.js 的 axios 插件中访问当前的 fullPath？

】如何在Nuxt.js的axios插件中访问当前的fullPath？【英文标题】：HowcanIaccessthecurrentfullPathinsideofaaxiosplugininNuxt.js?【发布时间】：2020-02-0807:01:42【问题描述】：我正在尝试从Axios的Nuxt插件中获取通过route.fullPath的当前路径。它在一定... 查看详情

无法在 Nuxt 组件中使用 axios 从 api 获取数据

】无法在Nuxt组件中使用axios从api获取数据【英文标题】：Can\'tgetdatafromapiwithaxiosinNuxtcomponents【发布时间】：2021-12-1502:53:48【问题描述】：<template><divid="post"><p>data</p></div></template><script>exportde 查看详情

使用 Nuxt auth 和 axios 时 Javascript 堆内存不足

...：我正在尝试在使用快速服务器中间件的Nuxt应用中实现本地登录。我正在使用以下模块nuxt身份验证axios护照，本地护照，本地护照猫鼬，护照会话快速会话但是，一旦我在我的应用程序中设置了nuxta 查看详情

nuxt.js - 如何在服务器端为所有客户端缓存 axios 调用

】nuxt.js-如何在服务器端为所有客户端缓存axios调用【英文标题】：nuxt.js-Howtocacheaxioscallatserversideforallclients【发布时间】：2020-05-1915:45:59【问题描述】：我正在使用vue+nuxt.js应用程序，我想知道是否可以为所有客户端缓存axioswebser... 查看详情

如何在 nuxt/axios 中设置 baseUrl？

】如何在nuxt/axios中设置baseUrl？【英文标题】：howtosetbaseUrlinnuxt/axios?【发布时间】：2020-01-2105:35:46【问题描述】：在nuxtaxiosmudule中未设置baseURL，我无法使用nxut/auth模块进行身份验证。这是nuxt.config.js：auth:strategies:local:endpoints:logi... 查看详情

NUXT.js 和 Axios 运行时如何避免代码重复？

】NUXT.js和Axios运行时如何避免代码重复？【英文标题】：HowtoavoidcodeduplicationwhenrunningNUXT.jsandAxios?【发布时间】：2020-11-2205:28:43【问题描述】：如果相似的代码（如示例中）在不同的组件中重复，但我在函数参数中传递的名称略... 查看详情

在 nuxt.config.js 中使用环境变量

...508:12:04【问题描述】：我正在使用Nuxt和Axios，但在从我的本地计算机构建应用程序时使用环境变量时遇到问题。我已安装@nuxtjs/dotenv模块以尝试解决此问题，但仍有问题。注意：在我的托管服务提供商环境中构建应用程序时，环... 查看详情

如何在nuxt中获取axios baseUrl？

】如何在nuxt中获取axiosbaseUrl？【英文标题】：HowtogetaxiosbaseUrlinnuxt?【发布时间】：2019-01-2418:54:30【问题描述】：我的Nuxt.js项目中有axios模块。当我的客户端在端口3000上运行时，我还在localhost:4040/api中设置了我的baseUrl（用于API）... 查看详情

Nuxt.js 中“$axios”的类型是啥？

】Nuxt.js中“$axios”的类型是啥？【英文标题】：Whatisthetypefor"$axios"inNuxt.js?Nuxt.js中“$axios”的类型是什么？【发布时间】：2022-01-1923:19:35【问题描述】：夏天现在我为API连接实现了RepositoryFactory模式。https://medium.com/canarias... 查看详情

在本地 https 上运行 nuxt – nuxt.config.js 的问题

】在本地https上运行nuxt–nuxt.config.js的问题【英文标题】：Runnuxtonhttpslocally–problemwithnuxt.config.js【发布时间】：2019-06-1316:01:18【问题描述】：我正在尝试使用https在本地运行nuxt来测试一些地理定位的东西。(https://nuxtjs.org/,https://n... 查看详情

nuxtjs/axios 4.4.0版本的初始化方法是啥？ (nuxt.js)

】nuxtjs/axios4.4.0版本的初始化方法是啥？(nuxt.js)【英文标题】：nuxtjs/axiosWhatisthewaytoinitializeversion4.4.0?(nuxt.js)nuxtjs/axios4.4.0版本的初始化方法是什么？(nuxt.js)【发布时间】：2018-04-1807:37:22【问题描述】：我想使用nuxtjs/axios模块。首... 查看详情

nuxt部署到服务器(代码片段)

nuxt部署到服务器1.在nuxt.config.js中增加配置server:port:3000,//线上端口host:'0.0.0.0',2.在utils/request.js中修改配置constservice=axios.create(baseURL:'http://主机ip:端口号',//这里是你部署后台服务的主机和端口号timeout:20000// 查看详情

nuxt部署到服务器(代码片段)

nuxt部署到服务器1.在nuxt.config.js中增加配置server:port:3000,//线上端口host:'0.0.0.0',2.在utils/request.js中修改配置constservice=axios.create(baseURL:'http://主机ip:端口号',//这里是你部署后台服务的主机和端口号timeout:20000// 查看详情

无法提交 Axios Post 表单 Nuxt.js (VueJS)

】无法提交AxiosPost表单Nuxt.js(VueJS)【英文标题】：Can\'tSubmitAxiosPostformNuxt.js(VueJS)【发布时间】：2019-06-2113:45:52【问题描述】：我正在玩我在Vue中的第一个表单。我已经用Nuxt创建了我的应用程序。我可以通过我的API的axiosget请求获... 查看详情

nuxt.js入门安装及灵活使用(代码片段)

...公共导航4.3、自定义布局4.4、错误页面4.5、Nuxt组件特殊配置4.5.1、模板代码4.5.2、head5、ajax操作5.1、整合axios5.1.1默认整合5.1.2手动整合5.1.3、常见配置5.2、使用axios发送ajax5.3、使用asyncData发送ajax5.3.1发送一次请求5.3.2、发送多次请... 查看详情

axios、nuxt 和 docker 的奇怪行为

...我一直在使用docker，更具体地说是docker-compose。经过多次配置，我已经让所有三个图 查看详情