如何在 vuejs2 中使用 proxyTable?

Question

我正在学习使用 Vue-cli webpack。我希望我的应用能够使用开发服务器访问 PHP 后端 API。 后端 API 由 Apache 托管在同一台计算机上。

为了测试，我创建了一个非常简单的PHP脚本，可以使用url访问它http://localhost/php/script.php

<?php
header("Content-type:application/json");
$data = [
'type' => 'Car',
'brand' => 'Ford',
'color' => 'Blue'
];
echo json_encode($data);

事实上，在我的 Apache httpd 服务器中，文件夹 php 是我的 vue 应用程序中静态文件夹的符号链接。

在我的 vue 应用程序中，我在桌面上使用命令vue init vuetifyjs/webpack vuetestproject创建，我有一个组件 Foo.vue，其中包含以下代码：

var axios = require('axios');
axios.get('/static/script.php', { data: "some data" })
.then(function (response) {
console.log('SUCCESS');
console.log(response);
})
.catch(function (error) {
console.log('ERROR');
console.log(error.message);
});

然后，在安装了一些像 axios 这样的资源后，我通过执行命令npm run dev来启动我的节点服务器。

在http://localhost:8080/#/foo上访问我的应用程序时，我可以看到 axios 请求正在执行。我在控制台中收到一条成功消息，这意味着 axios 正在收到响应。但是，这种反应不是我所期望的。当我查看控制台中显示的对象时，似乎没有解释 PHP 代码。响应的数据属性包含脚本.php文件的内容，就像它是一个.txt文件一样。

请注意，我在 vue 应用程序的配置/索引.js中编辑了代理表：

// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/static': {
target: 'http://localhost/php',
changeOrigin: true
}
},

我查看了有关 http://vuejs-templates.github.io/webpack/proxy.html 的信息，以及我找到的其他几个来源。但我没有设法让它工作。 我很确定我的问题出在这个代理表中的某个地方。

有人可以帮助我吗？

Answer 1

不要将PHP 脚本从您定义为assetsSubDirectory的同一目录中提供。 这样做会破坏代理，并导致该目录中的项目作为静态文档提供，而不是通过 PHP 服务器代理。

相反，将您的脚本从另一个目录(如"脚本")服务器，并将其定义为代理路径。 此外，正如您所说，添加一个rewrite属性：

// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/scripts': {
target: 'http://localhost/php',
rewrite: {'^/scripts': ''},
changeOrigin: true
}
},

使用新代理：

axios.get('/scripts/script.php', () => {...});