关键词：
【中文标题】vue-cli开发模式如何与服务端api结合？【英文标题】：How to combine vue-cli development mode with server-side api? 【发布时间】：2019-10-18 09:27:02 【问题描述】：我是 vue 新手，在这里有点困惑。
我正在使用 vue-cli 构建一个 vue 应用程序，我知道我可以使用 npm run serve 运行开发服务器，它在我的 package.json 中作为脚本引用为 vue-cli-service serve
但我的应用需要一些来自本地 node.js 服务器的数据。我无法从开发模式请求此服务器，因为它在不同的服务器上运行。 为了让我的应用正常运行，我有义务使用
构建生产环境npm run build
然后要求我的节点服务器默认渲染生成的 index.html 文件。
如何将开发模式和我的节点服务器结合起来？
完成这项工作的最佳方法是什么？
非常感谢
【问题讨论】：
您有任何错误吗？您在哪个端口上运行节点服务器？我愿意打赌它与端口有关-您尝试做的事情是可能的.. 相同 ip 但不同端口，我在浏览器控制台中收到access to XMLHttpRequest at 'http://localhost/connected' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource 错误
如果您使用 Express，您很可能需要添加 cors 库或 cors 标头服务器端。Good example here。
是的，非常感谢！
您可以简单地定义一个代理来解决本地开发的这个问题：cli.vuejs.org/config/#devserver-proxy
【参考方案1】：
我偶然发现了这个，发现答案隐藏在 cmets 列表的底部，所以我想我会突出显示它。 这个答案取自@Frank Provost 评论，这确实应该是公认的答案。正如他在链接https://cli.vuejs.org/config/#devserver-proxy 中提到的那样，您需要做的就是在您的（客户端）项目根目录中创建/编辑 vue.config.js 文件以包含以下内容：
module.exports =
devServer:
proxy: 'http://localhost:3000' // enter dev server url here
然后像往常一样从您的服务器项目启动您的开发服务器：
[server-root]$ npm run dev
并从 vue-cli 项目运行您的客户端项目
[client-root]$ npm run serve
然后，当您访问客户端 url（通常是 localhost:8080）时，所有 api 请求都将被转发到您的开发服务器。所有热模块更换仍然适用于客户端和服务器。
【讨论】：
“无后端”的开发模式
“无后端”怎么开发，数据库、API接口怎么办？前端的专业化已成趋势，独立开发功能满足定制化需求已是呼之即出。“无后端”也恰逢其时，这种开发模式释放了前端开发的开发能力。 “无后端”是为移动应... 查看详情
node后端数据渲染
引言：对于前端开发者来说，在大型Web应用开发中，很多时候并不需要完全重新设计整个应用后台的架构，更多的情况下需要结合Node的能力帮助我们解决前后端分离开发模式下无法解决的问题。本文带我们学习通常前后端分离... 查看详情
前后端分离与不分离
...页的接口不再适用于前端App应用，为了对接App后端还需再开发一套接口。前后端分离 前后端分离的核心：后台提供数据，前端负责显示 在前后端分离的应用模式中，后端仅返回前端所需的数据，不再渲染HTML页面，... 查看详情
drf入门规范序列化器组件视图组件请求与响应(代码片段)
DRF框架之入门规范 本篇文章会详细介绍web开发模式、API接口及其接口测试工具、restful规范、还有经常分不清又很重要的序列化与反序列化的部分，初级交接触APIView、Request类。每个人对知识点的理解都会不一样，因此我会用... 查看详情
将服务器端 MVC 与 Backbone.js 相结合
...因此我采用了Backbone.JS，事实证明它非常有用。我不确定如何构建我的系统以结合这两种技术。在我看来，我有两个选择从服务器端的MVC中废弃“V”，将 查看详情
将 Flask 与 Nuxtjs 结合用于 s-s-r
...rs-s-r【发布时间】：2020-05-1803:33:03【问题描述】：我正在开发一个前端和后端分离的通用应用程序，使用Flask作为API和Nuxtjs作为前端。在尝试Nuxtjs之前，我只使用vuejs(SPA)，但后来我意识到它没有针对SEO进行优化。无论如何，在使... 查看详情
vue-cli3的本地代理配置(代码片段)
... 为什么需要请求代理呢？按照我的理解就是因为现在开发都是前后端分离，所以开发都不是在同一台主机上的，所以当我们需要再开发环境中请求API，需要服务器的API代理到本地(原理是什么呢？是如何代理过来的呢？有待... 查看详情
前端如何高效的与后端协作开发(代码片段)
前端如何高效的与后端协作开发1.前后端分离前端与后端的分离，能使前端的开发脱离后端的开发模式，拥有更大的自由度，以此便可做前端工程化、组件化、单页面应用等。可以参考：前后端分离、web与static服务器分离2.尽量... 查看详情
当有两个后端服务器时如何共享数据库模式？
...rvers?【发布时间】：2020-12-0817:24:06【问题描述】：我正在开发一些服务器。该服务器由一个前端和两个后端组成。至此，我已经完成了一个后端的开发，我想开发另一个。两者都是快速服务器，而db正在使用mongodb。这个时候，我... 查看详情
微服务架构模式简介
...roservice架构模式设计及搭建一个具有良好扩展性并可持续开发的系统。除此之外，该书还将基于该模式的系统演化流程与ContinuousDelivery等当前甚为流行的开发流程结合在了一起，使得Microservic 查看详情
淘宝客的cps模式盈利是啥
...作简单，适合在线出售卖家工具的盈利模式。服务平台为开发者的应用提供包括营销、订购、结算、分成在内的完整解决方案。开发者只需把应用发布到服务平台，借助服务平台出售应用，并从应用出售中获得分成即可。2、自... 查看详情
如何使用 webpack 和 vue-cli 将服务器端变量发送到 vue 实例？
】如何使用webpack和vue-cli将服务器端变量发送到vue实例？【英文标题】：Howtosendserver-sidevariablestovueinstanceusingwebpack&vue-cli?【发布时间】：2018-09-2611:25:38【问题描述】：我目前正在使用vue-cli创建一个项目，该项目使用webpack生成... 查看详情
项目概述和初始化
目录1.电商后台管理系统的功能2.开发模式整体采用前后端分离的开发模式后端负责操纵数据库和写API，前端负责绘制页面和调用后端写的API前端项目技术栈VueVue-routerElement-UIAxiosEcharts后端项目技术栈Node.jsExpressJwtMysqlSequelize3.... 查看详情
六种常用的微服务架构设计模式（建议收藏）
...的数据，提供最终用户体验。这种API分层方法与细粒度SOA模式很好地结合在一起，通常，这两者要么可以共存，要么细粒度SOA模式演化成基于细粒度SOA的分层API模式。API主导的连接方法为细粒度SOA模式提供了一些层次结构，这些... 查看详情
传统的dom是如何进行渲染的？以及单页面开发与多页面开发的优缺点。
分为三种：纯后端渲染，纯前端渲染，服务端的js渲染结合前端渲染。纯后端渲染纯后端的DOM渲染，DOM树的生成完全是在后端服务器中完成的，相当于后端服务器的程序会把各种的数据拼成一个DOM树，并转换成一个字节流作为HTTP... 查看详情
如何将 GraphQLObjectType 与 graphql-tag 和 gql-tag 创建的模式结合起来？
】如何将GraphQLObjectType与graphql-tag和gql-tag创建的模式结合起来？【英文标题】：HowcanIcombineaGraphQLObjectTypewithaschemacreatedbygraphql-tagwithgql-tag?【发布时间】：2021-02-2519:25:49【问题描述】：我使用graphql-tag和apollo-server-express来连接为api... 查看详情
前后端分离微服务架构如何设计
参考技术A前端前端开发人员专注业务的页面呈现，非常注重用户体验度，也是与各种角色打交道最多的。比如：一般前端工作包括六个部分：后端如果前后端职责划分很清楚的话，后端更多开发工作在于业务接口设计、业务逻... 查看详情
restful
前后端分离优点：1.pc,app,pad多端适应2.SPA开发模式开始流行3.前后端开发职责不清4.开发效率，前后端互相等待5.后台开发语言和模板高度耦合，导致开发语言依赖严重 前后端分离缺点：1.前后端学习门槛增加2.数据依赖导致文... 查看详情