Vue.js项目调用PHP接口返回源码不执行，该如何配置VS Code环境？

问题根因 #

• 你当前运行Vue项目用的是前端框架自带的开发服务器（Vite/Vue CLI内置的静态服务器），仅支持提供静态资源，不具备PHP解析能力，请求PHP文件时会直接返回源码而非执行后的结果。
• 你之前使用CDN引入的HTML文件能正常运行，是因为你当时是把HTML和PHP文件都放在了支持PHP解析的服务环境（如XAMPP、WAMP、LNMP等集成环境）下访问，PHP文件会被服务端解析执行后再返回结果。
• 另外你的代码中两个axios请求的PHP路径不一致，一个是api/ajaxfile.php，另一个是ajaxfile.php，也可能导致请求路径错误。

环境配置解决方案 #

1. 部署PHP运行环境 #

本地安装PHP集成运行环境，推荐XAMPP/WAMP，安装后启动Apache服务，将你的ajaxfile.php文件放到集成环境的站点根目录下（XAMPP对应是安装目录下的htdocs文件夹），测试访问http://localhost/ajaxfile.php能正常返回接口数据即可。

2. 配置前端开发服务代理 #

在你的Vue项目配置文件中添加代理规则，把请求前缀为/api的接口转发到本地PHP服务地址，避免跨域问题同时让PHP请求走支持解析的服务：

如果你用的是Vue CLI（vue.config.js）：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost', // 你本地PHP服务的地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // 把请求路径里的/api前缀去掉，最终请求地址就是http://localhost/ajaxfile.php
        }
      }
    }
  }
}

如果你用的是Vite（vite.config.js）：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

3. 修正代码中的请求路径和赋值逻辑 #

把两个axios请求的路径统一调整为带/api前缀的格式，确保走代理规则，同时修改回调的this指向问题：

// 查询所有记录
axios.get('/api/ajaxfile.php')
    .then(response => {
        this.users = response.data;
    })
    .catch(function (error) {
        console.log(error);
    });

// 按ID查询
if (this.userid > 0) {
    axios.get('/api/ajaxfile.php', {
        params: {
            userid: this.userid
        }
    })
    .then(response => {
        this.users = response.data;
    })
    .catch(function (error) {
        console.log(error);
    });
}

4. 重启服务生效 #

修改配置后重启Vue开发服务，再请求接口就会自动转发到PHP服务，PHP代码会正常执行返回结果。

内容的提问来源于stack exchange，提问作者Franco Zenatti