使用带有 Vue JS 和 Netlify 函数的 Netlify Dev 进行开发答案

【问题标题】：Developing using Netlify Dev with Vue JS and Netlify Functions使用带有 Vue JS 和 Netlify 函数的 Netlify Dev 进行开发
【发布时间】：2019-12-29 22:34:45
【问题描述】：

我正在将 vue + netlify 用于一个使用我构建的 netlify 函数的小型 Web 应用程序。在生产中一切正常（当我基于我的 master 分支提交 master 和 netlify 自动部署时）但是当我尝试使用 netlify dev 启动本地开发实例时，对 netlify 函数的调用失败：

VM23:1 POST http://localhost:18002/.netlify/functions/customfunction 404 (Not Found)

很明显，开发环境中的端点不相同，但我怎么知道那个端点可能是什么？在控制台中运行 netlify dev 命令时，它说 lambda 服务器正在侦听 3467... 但尝试使用端点 http://localhost:34567/.netlify/functions/customfunction 会导致 CORS 错误。如有任何帮助，我们将不胜感激！

【问题讨论】：

标签： vue.js netlify

【解决方案1】：

您可能会收到 CORS 错误，因为您的服务器未与您的 vue 应用程序在同一主机上运行，要解决此问题，您必须设置代理，为此您需要在项目目录中创建 vue.config.js 文件（不是 vue 文件夹）然后通过以下代码：

module.exports = {
  devServer: {
    proxy: 'http://localhost:34567' // the port your server in running on
  }
}

现在您的代理已设置，因此您的请求 URL 将如下所示：

/.netlify/functions/customfunction

文档参考：https://cli.vuejs.org/config/#devserver-proxy

【讨论】：