Vue代理配置

  1. 在 package.json 的同级目录(项目根目录)下创建 vue.config.js
  2. 在 vue.config.js 写入下列内容
module.exports = {devServer: {proxy: 'http://localhost:8080'}}

这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到 http://localhost:4000。

多服务器代理配置:

 devServer: {proxy: { // 配置如下代码'/api': {target: 'http://ip:9000/', // 你请求的第三方接口changeOrigin: true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题ws: true,pathRewrite: {  // 路径重写,'^/api': ''  // 替换target中的请求地址,也就是说以后你在请求https://xxxxxx/dictionary/data_dictionary_front.json这个地址的时候直接写成/api即可。}},'/wordsFeeling': {target: 'http://ip:5000/', // 你请求的第三方接口changeOrigin: true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题ws: true,pathRewrite: {  // 路径重写,'^/wordsFeeling': ''  // 替换target中的请求地址,也就是说以后你在请求https://xxxxxx/dictionary/data_dictionary_front.json这个地址的时候直接写成/api即可。}}},}
  1. 终端打开项目根目录,输入:
npm run serve

此时会以 vue.config.js 作为配置文件启动项目

配置过程遇到的坑

使用命令 vue serve 启动时,需在 App.vue 或 main.js 所在的目录下启动,此时不会以 根目录下的 vue.config.js作为配置文件导致代理设置失败。

因此在需要 设置代理 时应 在项目 根目录 下 使用 npm run serve 的方式启动

vue配置官方文档:https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/330274.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

@Resource,@Autowired,@Inject3种注入方式详解

转载自 Resource,Autowired,Inject3种注入方式详解 概况 Resource,Autowired,Inject 这3种都是用来注入bean的,它们属于不同的程序中。 ANNOTATIONPACKAGESOURCEResourcejavax.annotationJava JSR-250Injectjavax.injectJava JSR-330Autowiredorg.springframework.b…

repost-微信小程序入门教程之一:初次上手

repost 4 http://www.ruanyifeng.com/blog/2020/10/wechat-miniprogram-tutorial-part-one.html 微信是中国使用量最大的手机 App 之一,日活跃用户超过3亿,月活跃用户超过11亿(2019年底统计),市场极大。 2017年&#x…

Spring MVC : 概念模型 HandlerMethod(转载)

Spring MVC 应用启动时会搜集并分析每个 Web 控制器方法&#xff0c;从中提取对应的"<请求匹配条件,控制器方法>“映射关系&#xff0c;形成一个映射关系表保存在一个 RequestMappingHandlerMapping bean 中。然后在客户请求到达时&#xff0c;再使用 RequestMappin…

repo-话说软件详细设计工具

repost 4 https://blog.csdn.net/tang_huan_11/article/details/8043481 在软件设计是需要写软件详细说明书,设计此文档的时候,肯定少不了工具.现在我们就来了解一下软件详细设计的 工具. 1)程序流程图 程序流程图又称为程序框图,它是最古老,应用最广泛且最有争议描述详细设计的…

你必须了解Spring的生态

转载自 你必须了解Spring的生态 Spring不止是提供了IOC、AOP的功能&#xff0c;还提供了大量的基于Spring的项目&#xff0c;拿来用就行了&#xff0c;用于一站式开发&#xff0c;大大降低了开发的难度。 下面列举下主要的一些Spring的生态项目&#xff1a; Spring Boot&#…

Vue 使用 token

vue 解析 token 引入jwt-decode 包 npm install jwt-decode --save在 vue 中引入jwt-decode import jwtDecode from jwt-decodejs 中使用 const decode jwtDecode(token); console.log(decode);//解析后的对象vue-resource 设置请求头&#xff0c;带上token 第一种方法&a…

vmware安装centos6-步骤小结

【README】安装了很多次&#xff0c;但没有记录过&#xff0c;经常忘记&#xff0c;所以就记录一下 【1】 vm15 install centos8 at 2020/12/12 完成。

Ehcache介绍及整合Spring实现高速缓存

转载自 Ehcache介绍及整合Spring实现高速缓存 Ehcache介绍 EhCache 是一个纯Java的进程内缓存框架&#xff0c;具有快速、精干等特点&#xff0c;是Hibernate中默认的CacheProvider。它使用的是JVM的堆内存&#xff0c;超过内存可以设置缓存到磁盘&#xff0c;企业版的可以使用…

转:使用 Tkprof 分析 ORACLE 跟踪文件

【README】 昨天在验证oracle 数据库性能的时候&#xff0c;查询日志中 打出了 exec time , fetch time 不懂什么意思&#xff0c;所以就记录了下&#xff1b; A 表 680w&#xff0c; count 耗时5秒&#xff1b; B表 2013w&#xff0c; count 耗时10秒&#xff1b; A inne…

浅谈大型网站之负载均衡架构

转载自 浅谈大型网站之负载均衡架构 概念 负载均衡&#xff0c;英文名称为Load Balance&#xff0c;其意思就是分摊到多个操作单元上进行执行&#xff0c;例如Web服务器、FTP服务器、企业关键应用服务器和其它关键任务服务器等&#xff0c;从而共同完成工作任务。 负载均衡建立…

单词拆分

作者&#xff1a;xiao_ben_zhu 链接&#xff1a;https://leetcode-cn.com/problems/word-break/solution/shou-hui-tu-jie-san-chong-fang-fa-dfs-bfs-dong-tai/ 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 著作权归作者所有。商业转载请联系作者获得授权&#xff…

centos Error: Cannot find a valid baseurl for repo: base 解决方法

参考 https://arstech.net/centos-6-error-yumrepo-error-all-mirror-urls-are-not-using-ftp-http/ 【1】报错现场&#xff1b; 原因&#xff0c; 软件镜像地址有误&#xff0c;需要手工录入&#xff1b; 2、编辑文件&#xff0c; /etc/yum.repos.d/CentOS-Base.repo. 找到…

精选30道Java多线程面试题

转载自 精选30道Java多线程面试题 1、线程和进程的区别 2、实现线程有哪几种方式&#xff1f; 3、线程有哪几种状态&#xff1f;它们之间如何流转的&#xff1f; 4、线程中的start()和run()方法有什么区别&#xff1f; 5、怎么终止一个线程&#xff1f;如何优雅地终止线程&…

Vue 媒体处理(摄像头,截图,播放本地视频)

Vue 媒体处理&#xff08;摄像头&#xff0c;截图&#xff0c;播放本地视频&#xff09; 一. 打开摄像头 javascriptthis.constraint {// video属性设置video: {width: 300,height: 300,},// audio属性设置audio: true,}navigator.mediaDevices.getUserMedia(this.constrain…

how to install nc on centos8及nc应用

转自&#xff1a; https://linuxconfig.org/install-netcat-on-redhat-8 【README】 nc 是什么&#xff1f; nc&#xff0c;全名叫netcat&#xff0c;它可以用来完成很多的网络功能&#xff0c;譬如端口扫描、建立TCP/UDP连接&#xff0c;数据传输、网络调试等等&#xff0c…

大型网站架构利器-CDN技术

转载自 大型网站架构利器&#xff0d;CDN技术概念CDN这个概念相信大家都比较耳熟&#xff0c;到底什么是CDN呢&#xff1f;CDN&#xff0c;全称为Content Delivery Network&#xff0c;即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环…

centos8启动zk集群失败:zk Error contacting service. It is probably not running.

【README】在 192.168.163.201 机器上 启动zk &#xff0c;并查看zk 这台&#xff1b; 即 集群只有2台机器&#xff0c; 201 202 --ZOO.cfg# The number of milliseconds of each tick tickTime2000 # The number of ticks that the initial # synchronization phase can tak…

动态调整canvas时的问题

动态调整canvas大小时必须重新获取上下文&#xff08; canvas.getContext(‘2d’) &#xff09;及重新设置ctx的属性&#xff0c;否则会导致后续的绘制操作无效 动态调整canvas: var canvas document.getElementsByTagName("canvas")[0];var ctx canvas.getConte…

Maven精选系列--标准目录结构

转载自 Maven精选系列--标准目录结构Maven的目录结构和传统的项目有所差别&#xff0c;下面是一个jar包通常有的目录结构。src/main/java&#xff1a;源代码目录 src/main/resources&#xff1a;资源文件目录 src/test/java&#xff1a;测试代码目录 src/test/resources&#x…

java本地连接zk集群

【README】基于centos8 搭建zookeeper 集群&#xff0c;refer2 https://blog.csdn.net/PacosonSWJTU/article/details/111409079 【1】创建maven项目 添加依赖后&#xff0c; pom.xml 长这个样子&#xff1a; <project xmlns"http://maven.apache.org/POM/4.0.0&quo…