公司项目vue cli2升级到vue cli3

news2024/10/2 14:39:02

背景:

公司项目历时时间较长,通过长时间的迭代,目前项目文件较多(src目录下有2217个文件),系统庞大, 之前通过vue cli2脚手架构建的项目框架,在本地开发时已经明显感觉到吃力(项目首次启动时间110s以上,热更新时间40s以上,项目打包时间119s以上)

基于以上背景,决定对整个项目的构建进行重构,主要方案:vue cli2 升级到 vue cli3,该方案最简单,且影响范围最小,只是对项目的构建服务进行了优化,所有的项目中用到的依赖包以及项目中的业务代码不会有大的改动

升级步骤:

https://cli.vuejs.org/zh/guide/creating-a-project.html

为防止对已有项目造成破坏,建议在本地新建一个文件夹,通过vue cli在本地创建新项目,然后将客户管家中的package.json中用到的依赖包添加到新项目的package.json中,再将业务代码(主要是将src目录下的文件)移动到新项目中,还有之前static目录,现在迁移到public目录下,

对应的,之前使用到static文件路径的地方都需要对路径进行相应的修改。比如:

修改之前

修改之后,static打包之后,在项目的根目录下,所以相对地址直接通过’/static/'就可以取到

等到新文件夹中调试的差不多的时候,将框架修改,以及业务代码中的部分修改同步到项目中,删除node_modules,重新install依赖包。

遇到的问题:

  1. 刚开始全局安装的vue cli是5.x的版本,有几个报错

报错一:

解决:https://www.jianshu.com/p/6c31d2fbd303

这个报错是因为vue.config.js的一些配置写法不对,我这里的错误原因是overlay的配置写法错误(下面的是vue cli5.x版本以下的写法),

对应5.x以上版本的写法应该在overlay外层再加一层client包裹,如下

报错二: Error: Cannot find module 'webpack/lib/RuleSet'

解决:https://blog.csdn.net/qq_55269092/article/details/123219155

有点尴尬,这个问题查到最后的解决方案是将vue cli版本从5.x降到4.x,这种修改方案最简单粗暴。

于是,将vue cli全局卸载之后,重新安装4.x的版本,上面overlay的配置又去掉了外层包裹的client对象。

报错三:[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available

解决方案:https://www.cnblogs.com/web-learn/p/15588649.html

选一个顺眼的方案:

  1. 关于内容安全策略的处理 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

该段meta标签的作用:意思是自动将http的不安全请求升级为https

解决:https://www.cnblogs.com/zhangliang88/p/16357037.html

本地服务启动时,如果存在该段meta标签,则会有如下报错

且该段报错会导致本地开发时,无法正常触发热更新,影响开发体验。

本地开发时,通过proxy代理的方式进行接口请求,理论上来讲,屏蔽该段代码不会影响功能,所以决定通过判断开发环境,来动态添加这段代码

判断如果不是本地服务,则添加该段代码,即打包部署时,该段代码会正常添加到项目中。

  1. 添加svg-sprite-loader插件

解决:https://blog.csdn.net/DW14687/article/details/124841186

添加对应的配置

升级效果对比:

  1. 首次本地启动:

  1. 单个文件修改热更新速度(修改同一个文件,同一个位置)

  1. 打包时间对比:

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

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

相关文章

Win10+vs2019配置与运行RenderMatch(踩坑记录)

Win10vs2019配置与运行RenderMatch RenderMatch旨在解决aerial images 和ground images 匹配问题&#xff0c;其思路可参考原论文 “Leveraging Photogrammetric Mesh Models for Aerial-Ground Feature Point Matching Toward Integrated 3D Reconstruction” 1.源码下载 G…

【2023new】OAK相机如何将Yolov5转换成blob格式?

编辑&#xff1a;OAK中国 首发&#xff1a;oakchina.cn 喜欢的话&#xff0c;请多多&#x1f44d;⭐️✍ 内容可能会不定期更新&#xff0c;官网内容都是最新的&#xff0c;请查看首发地址链接。 ▌前言 Hello&#xff0c;大家好&#xff0c;这里是OAK中国&#xff0c;我是助手…

机械革命极光Pro电脑开启出现英文代码无法启动怎么办?

机械革命极光Pro电脑开启出现英文代码无法启动怎么办&#xff1f;有的小伙伴在使用机械革命极光Pro电脑的时候&#xff0c;正常开启电脑却无法进入到桌面中&#xff0c;而是显示一些英文错误提示。遇到这个问题是我们的系统故障了&#xff0c;可以通过U盘重装系统的方法来进行问…

logback 自定义日志输出到数据库

项目日志格式 Spring Boot 的默认日志输出类似于以下示例&#xff1a; 2021-12-14 22:40:14.159 INFO 20132 --- [ main] com.kuangstudy.SpringbootApplication : Started SpringbootApplication in 2.466 seconds (JVM running for 3.617)输出以下项目&…

SpringBoot 整合 MongoDB 6 以上版本副本集及配置 SSL / TLS 协议

续上一篇 Linux 中使用 docker-compose 部署 MongoDB 6 以上版本副本集及配置 SSL / TLS 协议 前提&#xff1a;此篇文章是对上一篇文章的实战和项目中相关配置的使用&#xff0c;我这边针对 MongoDB 原有基础上做了增强&#xff0c;简化了 MongoDB 配置 SSL / TLS 协议上的支…

Android Studio引入JNI第三方库

一、前言 JNI作为Java与native沟通的桥梁&#xff0c;项目开发中难免要使用到&#xff1b;而我们除了自己开发JNI之外&#xff0c;有时候还要在Android Studio引入别人开源的C第三方库&#xff0c;并在jni层实现第三方库的调用。 二、流程 1.导入头文件和实现文件 将第三方…

Linux内核进程地址空间与进程内存布局

一&#xff0c;进程空间分布概述 对于一个进程&#xff0c;其空间分布如下图所示&#xff1a; 程序段(Text):程序代码在内存中的映射&#xff0c;存放函数体的二进制代码。初始化过的数据(Data):在程序运行初已经对变量进行初始化的数据。未初始化过的数据(BSS):在程序运行初未…

九龙证券|券商春季策略扎堆来袭 风格切换成焦点

2月以来&#xff0c;国泰君安、中信建投、国金证券等10余家券商组织相继发布2023年春季战略。综合来看&#xff0c;组织对A股持达观预期&#xff0c;未来两三个月A股商场或迎来重要切换。风格上&#xff0c;“中心财物&#xff0c;生长接力”或许成为上半年装备主线&#xff0c…

java 系列之Mybatis

java 系列文章 文章目录java 系列文章前言一、Mybatis 入门1.1 认识 框架&#xff08;了解&#xff09;1.2 认识 ORM&#xff08;要知道&#xff09;1.3 认识 Mybatis&#xff08;要知道&#xff09;二、Mybatis 使用2.1 创建maven项目并导入依赖2.2 准备数据库&#xff0c;包和…

释放内存流程

你好&#xff0c;我是安然无虞。 thread cache回收内存 当从 thread cache 中申请的内存对象使用完毕需要还回来的时候, 只需要计算出该内存对象对应 thread cache 中的哪一个自由链表桶, 然后将该内存对象插入进去即可. 不过需要注意的是, 如果不断有内存对象释放回来, 那么…

Java实现根据拼音首字母的排序

1.项目 手机APP端要对企业列表按企业名称首字母(如果企业名是英文的就按)进行分类排序&#xff0c;效果如下&#xff1a; 2.实现过程 2.1 首先引入项目的pinyin4j-2.5.0.jar包。 这个jar的下载地址如下&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1hkP_gGAYcgzyK_D…

跨链桥:Web3黑客必争之地

跨链桥&#xff0c;区块链的基础设施之一&#xff0c;所实现的功能是允许用户将自己的资产从一条链转移至另外一条链上&#xff0c;是连接不同的区块链的关键桥梁&#xff0c;常使用中心化的方式进行实现。由于跨链桥自身往往存储有用户所质押的巨额资产&#xff0c;是Web3黑客…

KUKA KR C4机器人与S7-1200PLC进行PROFINET通信的具体方法和步骤

KUKA KR C4机器人与S7-1200PLC进行PROFINET通信的具体方法和步骤 首先,从KUKA机器人控制柜中将KOP备选软件包拷贝出来,然后在“WorkVisual Development Environment”安装KUKA备选软件包(版本非常重要,尽量从控制柜中拷贝), 也可以从以下链接中获取: KUKA机器人PROFINET…

php 任务调度

在日常开发中&#xff0c;我们总会遇到一些在某个指定的时刻去执行&#xff0c;或是每隔xx时间执行&#xff0c;或是需要一直在后台监听的任务执行。基于这个需求&#xff0c;对于php我找了一些办法来实现这些功能 1、依赖于laravel的任务调度。 每隔xx时间执行一次命令&#…

七、虚拟机栈

虚拟机栈出现的背景 1.由于跨平台性的设计&#xff0c;Java的指令都是根据栈来设计的&#xff0c;不同平台CPU架构不同&#xff0c;所以不能设计为基于寄存器的。 2.优点是跨平台&#xff0c;指令集小&#xff0c;编译器容易实现&#xff0c;缺点是性能下降&#xff0c;实现同…

XC7K70T-1FBG676I【FPGA】XC3S200-4FTG256C参数XC7K70T-2FBG676C

Kintex-7 FPGA为快速增长应用和无线通信提供最优性价比和低功耗。Kintex-7 FPGA允许设计人员构建卓越带宽和12位数字可编程模拟&#xff0c;同时满足成本和功耗要求。Kintex-7内置支持8通道PCI Express (Gen1/Gen2)&#xff0c;用于连接主机系统。7系列器件利用Xilinx统一架构保…

如何实现外网跨网远程控制内网计算机?快解析来解决

远程控制&#xff0c;是指管理人员在异地通过计算机网络异地拨号或双方都接入Internet等手段&#xff0c;连通需被控制的计算机&#xff0c;将被控计算机的桌面环境显示到自己的计算机上&#xff0c;通过本地计算机对远方计算机进行配置、软件安装程序、修改等工作。通俗来讲&a…

超图软件许可过期后的处理

超图软件许可过期&#xff0c;博主犯了一个很低级的错误&#xff0c;特此发帖记录一下。 按照官网的介绍&#xff0c;直接申请新的许可&#xff0c;配置本地许可很简单的。 1.打开桌面软件会弹出以下的框。 2.配置本地许可对话框 3.切换到激活更新页面 4.选择激活文件即可 以…

内容团队如何快速出稿

对于内容团队而言&#xff0c;每个内容选题就相当于一个小项目&#xff0c;它们并非简单的线性工作流&#xff0c;相反其复杂程度不亚于一个小型工厂。一个内容选题会涉及内容形式&#xff0c;选题类型等多个变量&#xff0c;这些变量因素组合起来就是十几种不同类型的工作流。…

我花6个月从0开始面上大厂自动化测试岗,拿个20K不过分吧?

我是着急忙慌的准备简历——3年软件测试经验&#xff0c;可独立测试大型产品项目&#xff0c;熟悉项目测试流程...薪资要求&#xff1f; 3年测试经验起码能要个20K吧&#xff1f;” 我一个朋友跟我说&#xff1a; “我加班肝了一页半简历&#xff0c;投出去一周&#xff0c;…