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应用程序中静态文件夹的sym链接。

在我的桌面上使用命令vue init vuetifyjs/webpack vuetestproject创建的vue应用程序中，我有一个包含以下代码的组件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请求。我在控制台中收到SUCCESS消息，这意味着axios正在收到响应。但是，这种反应并不是我所期望的。当我查看控制台中显示的对象时，似乎没有解释PHP代码。 response的data属性包含script.php文件的内容，就像它是.txt文件一样。

请注意，我在config / index.js中为我的vue app编辑了proxyTable：

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

我查看了http://vuejs-templates.github.io/webpack/proxy.html上的信息，以及我发现的其他几个来源。但我没有设法让它发挥作用。我很确定我的问题出在这个proxyTable的某个地方。

任何人都可以帮助我？

Answer 1

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

相反，将脚本从另一个目录（例如＆＃34;脚本＆＃34;）中提取出来，并将其定义为代理路径。另外，正如您所说，添加rewrite属性：

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

使用新代理：

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

如何在vuejs2中使用proxyTable？

1 个答案: