vue2 proxy 代理配置报错 ValidationError: webpack Dev Server Invalid Options

news2024/11/24 17:22:53

vue/cli3(本文实际使用的是vue/cli4)代理配置如下: 

vue/cli4使用vue/cli3的代理配置会出现异常,本文解决办法为解决方法二处理,运行正常。 

vue 启动项目 yarn serve 或者 npm run dev 或者 npm run serve 时,编译异常:

ERROR  ValidationError: webpack Dev Server Invalid Options

options should NOT have additional properties

如下图截图:

解决方法一

问题原因: 

        在配置文件里用来解决跨域问题的 “代理” 对象值是空的 

解决问题: 

        主要由于(webpack.config.js 或者 vue.config.js)配置文件错误导致的,具体定位到proxy配置代理不能为空,导致运行项目报错,需要对proxy配置进行完全注释掉,如下图:

下图这种由于没有完全注释,会报错: 

解决方法二

问题原因: 

由于vue/cli版本差异问题造成的。 

解决问题: 

出现上述错误是因为给vue了无效的配置。原因就是我使用的是vue/cli4但使用了proxyTable进行配置。注意cli2下用的是proxyTable加上一系列配置,cli3及以上用的是proxy。

vue-V查看vue/cli的版本

使用vue.config.js解决代理问题。首先在根目录下创建 vue.config.js(注意检查不要创建在src文件夹下)。然后通过配置代理如下:

// vue.config.js
module.exports = {
    runtimeCompiler: true,
    publicPath: '/', //设置打包路径
    devServer: {
        port: 8081,
        host: 'localhost',
        open: true,
        https: false,
        proxy: {
          '/api/*': {
              target: 'http://127.0.0.1:8082',
              changeOrigin: true,
              pathRewrite: {
                  '^/api': ''
              }
          }
        }
    }
}

配置后运行npm run serve:

运行后一切正常,如下:

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

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

相关文章

and design vue表格列宽度拖拽,vue-draggable-resizable插件使用

and design vue2版的table表格不能拖拽列的宽度,通过vue-draggable-resizable插件实现 我用的是and design 1.7.8的版本,先下插件 yarn add vue-draggable-resizable2.1.0我这版本的and design用最新3.0.0以上的插件会有问题,实现不了效果&a…

EmguCV学习笔记 VB.Net 5.3 透视变换

版权声明:本文为博主原创文章,转载请在显著位置标明本文出处以及作者网名,未经作者允许不得用于商业目的。 EmguCV是一个基于OpenCV的开源免费的跨平台计算机视觉库,它向C#和VB.NET开发者提供了OpenCV库的大部分功能。 教程VB.net版本请访问…

微分方程(Blanchard Differential Equations 4th)中文版Section2.2

动力系统的几何分析 捕食者-猎物系统的向量场 在第2.1节中,我们展示了两个不同捕食者-猎物系统的 R ( t ) R(t) R(t) 和 F ( t ) F(t) F(t) 图形,但没有描述我们是如何生成这些图形的。我们将在第2.5节中解决这个问题,采用欧拉方法推广到…

Java | Leetcode Java题解之第355题设计推特

题目&#xff1a; 题解&#xff1a; class Twitter {private class Node {// 哈希表存储关注人的 IdSet<Integer> followee;// 用链表存储 tweetIdLinkedList<Integer> tweet;Node() {followee new HashSet<Integer>();tweet new LinkedList<Integer&g…

《深入浅出WPF》读书笔记.6binding系统(上)

《深入浅出WPF》读书笔记.6binding系统(上) 背景 这一章是核心内容。databinding可以理解为实现逻辑层和展示层的桥梁。 binding基础 如何理解binding <Window x:Class"BindingSysDemo.BindingSysDemo1"xmlns"http://schemas.microsoft.com/winfx/2006/…

【pyqt5】QLineEdit中的文本输入限制方式,输入校验规则的应用详解

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

从0到1学会nginx分布式框架

nginx 项目地址晓智科技晓智科技晓智文档晓智文档源码地址源码地址文档源码文档源码 yum 安装 nginx 安装 yum-utils sudo yum install -y yum-utils添加 yum 源文件 # 新建文件 vim /etc/yum.repos.d/nginx.repo # 添加文件源 [nginx-stable] namenginx stable repo ba…

点击展开详细说明网站html引导页源码

点击展开详细说明网站html引导页源码,源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面&#xff0c;重定向这个界面 https://download.csdn.net/download/huayula/89…

开箱即用,使用极空间搭建小清新的自托管个人仪表板『honey』

开箱即用&#xff0c;使用极空间搭建小清新的自托管个人仪表板『honey』 哈喽小伙伴们好&#xff0c;我是Stark-C~ 说到可以在NAS部署的自托管仪表板呀&#xff0c;导航栏呀简直不要太多&#xff0c;光是我之前分享的譬如Sun-Panel &#xff0c;Dashy&#xff0c;HomePage&am…

【Linux】1.Linux环境搭建

文章目录 1.Linux环境安装2.云服务器选择2.1 3个云服务器平台2.2阿里云平台租借云服务器教程 3.Xshell安装4.Xshell配置连接云服务器5.如何多人共享一台Linux云服务器&#xff1f;6.如何更改他人访问云服务器的密码呢&#xff1f;7.如何阻止你共享的人访问云服务器呢&#xff1…

<数据集>RSOD数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;936张 标注数量(xml文件个数)&#xff1a;936 标注数量(txt文件个数)&#xff1a;936 标注类别数&#xff1a;4 标注类别名称&#xff1a;[aircraft, oiltank, overpass, playground] 序号类别名称图片数框数1air…

【轨物推荐】数字化时代的企业技术创新方法论

原创 郭朝晖 蝈蝈创新随笔 2024年08月03日 18:29 上海 数字化转型的一个重要特点&#xff0c;是用数字化技术手段解决企业的技术、运营和管理问题。于是我发现&#xff1a;数字化项目往往既有技术项目的特点、又有工程项目管理的特点&#xff0e;还有创新项目的特点。但换个角…

鲲鹏服务器安装Kafka

由于项目需求&#xff0c;需要在鲲鹏云主机上安装Kafka&#xff0c;并且要求安装的版本为2.3.X。下面主要从以下几个步骤说明如何安装&#xff1a; 1、下载kafka的安装文件 2、上传到服务器 3、修改配置 4、启动 5、使用工具测试 服务器信息 CPU信息 [rootecs02 ~]# lscpu A…

[数据集][目标检测]瞳孔虹膜检测数据集VOC+YOLO格式8768张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;8768 标注数量(xml文件个数)&#xff1a;8768 标注数量(txt文件个数)&#xff1a;8768 标注…

24款保时捷帕拉梅拉升级原厂360全景影像案例

24款保时捷帕拉梅拉升级原厂360全景影像后&#xff0c;车辆的前后左右都能被清晰地拍摄下来&#xff0c;并通过车载屏幕实时显示。这可以帮助驾驶员更好地了解车辆周围的环境&#xff0c;从而提高驾驶安全性和便利性。以下是一些可能的效果展示&#xff1a; • 全景视图&#…

wincc报警如何通过短信发送给手机

单位使用WINCC上位机监控现场&#xff0c;需要把报警信息发送到指定手机上&#xff0c;能否实现&#xff1f;通过巨控GRMOPC系列远程智能控制终端&#xff0c;简单配置即可实现wincc报警短信传送到手机。配置过程无需任何通讯程序&#xff0c;也不要写任何触发脚本。 GRMOPC模…

Vue的遍历(列表、对象、字符串、数字)、key的原理

目录 1 遍历(列表、对象、字符串、数字)2. key的原理2.1 key使用index2.1 key使用数据的唯一id2.3 key的原理 3. 列表过滤4. 列表排序 1 遍历(列表、对象、字符串、数字) key可以使用数据的唯一字段(最好)&#xff0c;也可以使用index(默认) 使用示例: <!DOCTYPE html>…

数据科学已死?

既然有了人工智能&#xff0c;训练自己的机器学习模型是否还值得&#xff1f; 既然有了人工智能&#xff0c;学习 Python 是否还值得&#xff1f; 既然有了人工智能&#xff0c;KNIME 还在营业吗&#xff1f; 既然有了人工智能&#xff0c;数据科学是否仍然需要&#xff1f;…

【深度学习与NLP】——Transformer架构解析

目录 第一章:Transformer背景介绍 1.1 Transformer的诞生 1.2 Transformer的优势 1.3 Transformer的市场 第二章:Transformer架构解析 2.1 认识Transformer架构 2.1.1 Transformer模型的作用 2.1.2 Transformer总体架构图 2.2 输入部分实现 2.2.1 文本嵌入层的作用 …

维护和升级LabVIEW程序

在维护和升级LabVIEW程序时&#xff0c;需要全面考虑代码的现状和未来的需求。以下是各个方面的详细注意事项&#xff0c;以确保程序能够在稳定性和性能方面得到提升。 1. 理解现有代码: 深入代码分析: 仔细阅读现有的代码&#xff0c;了解其逻辑结构、数据流、和控制流程。关注…