在本地主机上运行的 Vue 应用程序中使用带有 php 文件的 JavaScript fetch() - 相对 URL 问题

Posted 2023-02-16

【中文标题】在本地主机上运行的 Vue 应用程序中使用带有 php 文件的 JavaScript fetch() - 相对 URL 问题

【英文标题】：Using JavaScript fetch() with a php file in a Vue app running on localhost - Relative URL problem

【发布时间】：2021-03-08 22:30:32

【问题描述】：

编辑：问题标题已更改。最初的问题标题是：在生产和开发中都可以使用的 Vue 应用程序中使用相对 URL，但事实证明这不是我的问题的原因（请参阅cmets 下面）。

我已经尝试了很多事情，我想做的就是在 javascript fetch() 方法中使用单个相对 url，并让它在开发和生产中始终如一地运行，而无需更改大量配置文件或 webpack 设置.

简而言之，我想fetch() 一个与应用程序位于同一目录中的get-users.php 文件——没有什么花哨或复杂的——只是一个从同一主机上的 mysql 数据库获取一些数据的 php 文件。

我可以让它在开发中工作，但它在生产中失败 (npm run build)，或者我可以让它在生产中工作，但它在开发中失败 (npm run serve)。它失败的原因本质上是因为生产中的相对url是dist文件夹的根目录，而开发中的相对url是vue项目文件夹的根目录——对吗？因此，例如在开发中，我可以使用 fetch(public/get-users.php) 完美运行，但在生产中 dist 文件夹不包含 public 文件夹，所以我收到 404 错误。我可以在每个build 之后手动将public 文件夹复制并粘贴到dist 文件夹中，但这似乎是一个不必要的额外步骤。

问题的一部分是我不完全理解像get-users.php 这样的文件应该放在哪里。我不介意是否必须将它放在public 或static 文件夹中，但是当我这样做时，由于上面的示例，它会在生产中失败。有人可以解释一下 public 文件夹在 Vue CLI 应用程序中的作用吗？它是否做了一些我不完全理解的事情？我错过了一些明显的东西吗？完成这项工作似乎是一项微不足道的任务，但我在这里撞墙了！请帮忙！ :)

【参考方案1】：

如果您使用的是vue cli，那么您只需将您的get-users.php 文件放在public 文件夹中，并在没有public 前缀的情况下访问此文件，如下所示：

fetch('get-users.php')

这对于 dev 和 prod 环境都可以正常工作，因为在构建步骤期间，webpack 会将所有静态资产从 public 复制到 dist 文件夹。

【讨论】：

感谢您的建议，但不幸的是，在开发过程中，我在控制台中收到错误消息 POST http://localhost:8080/get-users.php ... 404 Not Found。在生产中 (/dist) 我收到 3 个错误，其中一个是 GET http://localhost/js/app.651b0831.js ... 404 Not Found（另外两个基本相同，但针对不同的捆绑文件）

我可以通过将publicPath: "./" 添加到vue.config.js 文件来修复生产错误，但这对修复开发错误无济于事——因此可以很好地突出我的问题:)

我刚刚用vue cli 创建了一个简单的项目，在公共文件夹中添加了一个foo.json 文件，并且能够在开发和生产模式下获取。请为您的问题创建一个可重现的最小示例，并通过 github 或类似服务分享。

你能用一个简单的php文件试试fetch()吗？比如：<?php $cars = array("Volvo", "BMW", "Toyota"); echo json_encode($cars); ?>

好的，没问题。但是感谢您在fetch() 请求中使用.json 文件，我想我可能已经将问题缩小到.php 文件是问题所在。我之所以这么说是因为当我使用与以前完全相同的代码但只是将fetch() url 更改为测试.json 文件时，它的工作方式与您描述的完全一样，并且我在生产或开发中没有任何错误。这是我所期待的行为，但由于某种原因，使用.php 文件会破坏某些东西......？