公司项目vue cli2升级到vue cli3
背景:
公司项目历时时间较长,通过长时间的迭代,目前项目文件较多(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依赖包。
遇到的问题:
刚开始全局安装的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
选一个顺眼的方案:

关于内容安全策略的处理 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
该段meta标签的作用:意思是自动将http的不安全请求升级为https
解决:https://www.cnblogs.com/zhangliang88/p/16357037.html
本地服务启动时,如果存在该段meta标签,则会有如下报错

且该段报错会导致本地开发时,无法正常触发热更新,影响开发体验。
本地开发时,通过proxy代理的方式进行接口请求,理论上来讲,屏蔽该段代码不会影响功能,所以决定通过判断开发环境,来动态添加这段代码

判断如果不是本地服务,则添加该段代码,即打包部署时,该段代码会正常添加到项目中。
添加svg-sprite-loader插件
解决:https://blog.csdn.net/DW14687/article/details/124841186
添加对应的配置

升级效果对比:
首次本地启动:


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


打包时间对比:


相关文章:

公司项目vue cli2升级到vue cli3
背景:公司项目历时时间较长,通过长时间的迭代,目前项目文件较多(src目录下有2217个文件),系统庞大, 之前通过vue cli2脚手架构建的项目框架,在本地开发时已经明显感觉到吃力…...

流程图培训
工具 wps 目前咱们在新建里面,可以新建流程图 构成流程图的图形符号及其作用 常用的流程图介绍 flowchart 和 BPMN 两种 flowchart: 最开始的全名是”Process Flow Charts”,即处理流程图表。 BPMN: 定义了业务流程图,其基…...
编写使用多buffer的应用程序
编写使用多buffer的应用程序 文章目录编写使用多buffer的应用程序一、 编写一个支持单buffer、多buffer的APP二、 编译程序2.1 设置工具链2.2 编译三、上机测试3.1 恢复内核使用自带的LCD驱动3.2 禁止开发板自带的GUI程序3.3 把测试程序放到板子上、执行四、 LCD自动黑屏致谢一…...

【java 8】强大的 Stream API
📋 个人简介 💖 作者简介:大家好,我是阿牛,全栈领域优质创作者。😜📝 个人主页:馆主阿牛🔥🎉 支持我:点赞👍收藏⭐️留言Ὅ…...

自动驾驶仿真:ECU TEST自动化测试常用API调用
文章目录一、 API调用运行环境二、ET API帮助文档三、如何导入ET API四、 ET常用接口1、 创建用于添加测试步骤的Package2、 在Package的TestStep中添加precondition块3、 在Package的TestStep中添加Block块4、在Package的TestStep中添加PostconditionBlock块5、 在Package的Te…...
notepad++中使用正则表达式
目录 notepad中使用正则表达式 notepad中正则表达式的语法notepad中常用的正则表达式类notepad中查找窗口的关于正则表达式的参数说明notepad正则表达式不能选择匹配内容notepad正则表达式使用举例 正则表达式提取分隔符前的内容正则表达式替换一个分隔符为换行符删除多余的空…...

什么蓝牙耳机打游戏好?打游戏好用的无线蓝牙耳机
午休或是周末约上好友玩两局游戏,是忙里偷闲的快乐时刻,对于普通游戏玩家,其实耳机够用就行,下面就分享几款打游戏好用的蓝牙耳机。 一、南卡小音舱蓝牙耳机 蓝牙版本:5.3 推荐系数:五颗星 南卡小音舱li…...

基于appium的app自动化测试框架
App自动化测试主要难点在于环境的搭建,appium完全是基于selenium进行的扩展,所以app测试框架也是基于web测试框架开发的 一、设备连接 (即构建基础的测试环境,保证可以驱动设备进行操作) 0.准备测试环境 1࿰…...

【拿好了!Linux 运维必备的 13 款实用工具!】
本文介绍几款 Linux 运维比较实用的工具,希望对 Linux 运维人员有所帮助。 查看进程占用带宽情况 – Nethogs Nethogs 是一个终端下的网络流量监控工具可以直观的显示每个进程占用的带宽。 下载: http://sourceforge.net/projects/nethogs/files/ne…...

软考中级--嵌入式系统设计师考试培训教程开始了
1.考试时间: 1.1 上半年5月下旬考试 1.2 下半年11月上旬考试 2.考试内容 2.1 系统基础 满分75分 时间150分钟 2.2 系统设计 满分75分 时间150分钟 3.计划安排 3.1 熟悉考试大纲 3.2 按考纲学习相关内容 整理设计知识 快速学习形成知识印象 3.3 复习整理的知识 …...

JDBC学习(复习)-面试总结详细
JDBC详细介绍一、JDBC详细介绍二、jdbc面试总结2.1 JDBC操作数据库的步骤 ?2.2 JDBC中的Statement 和PreparedStatement,CallableStatement的区别?2.3 JDBC中大数据量的分页解决方法?2.4 说说数据库连接池工作原理和实现方案?2.4…...

前端:你不知道的async await
1.先抛出一个场景:你是否在日常开发中经常使用类似代码?async function getXXList () {const result await this.getArrListApi({page:1,id:2})this.arr result.data.listconsole.log(结果是…, this.arr)……………………其他逻辑代码 }1.1 问题那你是…...

c#前端实现对pcl点云颜色根据强度特征动态变化突出指定对象
前言 本文主要介绍如何使用c# winform对点云颜色根据点云强度信息对显示的点云颜色进行动态调整。 目的是根据强度信息采用不同的颜色特征突出不同的物体。 一、点云强度是什么? 点云强度又可以叫做反射率, 通常常见的点云格式包括:以pcl为…...

如何制定达人营销策略
如今,达人营销不再是一个新兴趋势,而是公司整个数字营销战略的一部分。虽然十年前,达人还不存在,但随着公司对数字化营销依赖度地提升,各个领域的大V群体逐渐壮大,越来越多的公司已经采用了达人营销策略。如…...
100种思维模型之三层解释思维模型-020
很多人认为,世界首富巴菲特的日子很轻松,因为他想要什么就可以买什么。 所以,人人都学巴菲特,但很多人不知道学习他什么…… 润米咨询董事长刘润老师在2020年干了这样一件事情:向100个不认识的人学习。如,向…...

RK系列(RK3568) i2s 音频输入 麦克风驱动
平台:Android12SOC:RK3568外围芯片:XS9922i2s简介:从上图看I2s主要的线有:SDO SCLK LRCK MCLK I2S协议只定义三根信号线:串行时钟信号SCLK(BCLK)、数据信号SD和左右声道选择信号WS。(1ÿ…...

Python|Pymol的安装
Pymol的使用其实可以分为两种,一种是GUI图形操作界面,直接可以去Pymol官网上下,另一种则是使用API的方式直接调用,适合写脚本批量处理一些东西。建议画图,看结构直接用GUI,但是计算RMSD啥的,用…...

Mysql中关于查询日志的配置详解
查询日志 MySQL中的查询日志保存在文本文件中,能够记录MySQL中的所有数据操作。 开启查询日志 MySQL默认情况下没有开启查询日志,如果需要开启查询日志,则需要在 my.cnf 文件或者 my.ini 文件的 [mysqld] 选项下进行配置。例如,…...

外包整整干了一年,废了。。。
先说一下自己的个人情况,大专生,18年通过校招进入湖南某软件公司,干了接近3年的功能测试,今年年初,感觉自己不能够在这样下去了,长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了…...

内网渗透(五十六)之域控安全和跨域攻击-非约束委派攻击
系列文章第一章节之基础知识篇 内网渗透(一)之基础知识-内网渗透介绍和概述 内网渗透(二)之基础知识-工作组介绍 内网渗透(三)之基础知识-域环境的介绍和优点 内网渗透(四)之基础知识-搭建域环境 内网渗透(五)之基础知识-Active Directory活动目录介绍和使用 内网渗透(六)之基…...

简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
【Linux】C语言执行shell指令
在C语言中执行Shell指令 在C语言中,有几种方法可以执行Shell指令: 1. 使用system()函数 这是最简单的方法,包含在stdlib.h头文件中: #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中,每个页面需要使用ref,onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入,需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?
在建筑行业,项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升,传统的管理模式已经难以满足现代工程的需求。过去,许多企业依赖手工记录、口头沟通和分散的信息管理,导致效率低下、成本失控、风险频发。例如&#…...

(二)原型模式
原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

如何将联系人从 iPhone 转移到 Android
从 iPhone 换到 Android 手机时,你可能需要保留重要的数据,例如通讯录。好在,将通讯录从 iPhone 转移到 Android 手机非常简单,你可以从本文中学习 6 种可靠的方法,确保随时保持连接,不错过任何信息。 第 1…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式: 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
AI编程--插件对比分析:CodeRider、GitHub Copilot及其他
AI编程插件对比分析:CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展,AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者,分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)
前言: 最近在做行为检测相关的模型,用的是时空图卷积网络(STGCN),但原有kinetic-400数据集数据质量较低,需要进行细粒度的标注,同时粗略搜了下已有开源工具基本都集中于图像分割这块,…...

Linux 中如何提取压缩文件 ?
Linux 是一种流行的开源操作系统,它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间,使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的,要在 …...