当前位置: 首页 > news >正文

公司项目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依赖包。

遇到的问题:

  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. 打包时间对比:

相关文章:

公司项目vue cli2升级到vue cli3

背景&#xff1a;公司项目历时时间较长&#xff0c;通过长时间的迭代&#xff0c;目前项目文件较多&#xff08;src目录下有2217个文件&#xff09;&#xff0c;系统庞大&#xff0c; 之前通过vue cli2脚手架构建的项目框架&#xff0c;在本地开发时已经明显感觉到吃力&#xf…...

流程图培训

工具 wps 目前咱们在新建里面&#xff0c;可以新建流程图 构成流程图的图形符号及其作用 常用的流程图介绍 flowchart 和 BPMN 两种 flowchart: 最开始的全名是”Process Flow Charts”&#xff0c;即处理流程图表。 BPMN&#xff1a; 定义了业务流程图&#xff0c;其基…...

编写使用多buffer的应用程序

编写使用多buffer的应用程序 文章目录编写使用多buffer的应用程序一、 编写一个支持单buffer、多buffer的APP二、 编译程序2.1 设置工具链2.2 编译三、上机测试3.1 恢复内核使用自带的LCD驱动3.2 禁止开发板自带的GUI程序3.3 把测试程序放到板子上、执行四、 LCD自动黑屏致谢一…...

【java 8】强大的 Stream API

&#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是阿牛&#xff0c;全栈领域优质创作者。&#x1f61c;&#x1f4dd; 个人主页&#xff1a;馆主阿牛&#x1f525;&#x1f389; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4d…...

自动驾驶仿真: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正则表达式使用举例 正则表达式提取分隔符前的内容正则表达式替换一个分隔符为换行符删除多余的空…...

什么蓝牙耳机打游戏好?打游戏好用的无线蓝牙耳机

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

基于appium的app自动化测试框架

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

【拿好了!Linux 运维必备的 13 款实用工具!】

​本文介绍几款 Linux 运维比较实用的工具&#xff0c;希望对 Linux 运维人员有所帮助。 查看进程占用带宽情况 – Nethogs Nethogs 是一个终端下的网络流量监控工具可以直观的显示每个进程占用的带宽。 下载&#xff1a; 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操作数据库的步骤 &#xff1f;2.2 JDBC中的Statement 和PreparedStatement&#xff0c;CallableStatement的区别&#xff1f;2.3 JDBC中大数据量的分页解决方法?2.4 说说数据库连接池工作原理和实现方案&#xff1f;2.4…...

前端:你不知道的async await

1.先抛出一个场景&#xff1a;你是否在日常开发中经常使用类似代码&#xff1f;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对点云颜色根据点云强度信息对显示的点云颜色进行动态调整。 目的是根据强度信息采用不同的颜色特征突出不同的物体。 一、点云强度是什么&#xff1f; 点云强度又可以叫做反射率&#xff0c; 通常常见的点云格式包括&#xff1a;以pcl为…...

如何制定达人营销策略

如今&#xff0c;达人营销不再是一个新兴趋势&#xff0c;而是公司整个数字营销战略的一部分。虽然十年前&#xff0c;达人还不存在&#xff0c;但随着公司对数字化营销依赖度地提升&#xff0c;各个领域的大V群体逐渐壮大&#xff0c;越来越多的公司已经采用了达人营销策略。如…...

100种思维模型之三层解释思维模型-020

很多人认为&#xff0c;世界首富巴菲特的日子很轻松&#xff0c;因为他想要什么就可以买什么。 所以&#xff0c;人人都学巴菲特&#xff0c;但很多人不知道学习他什么…… 润米咨询董事长刘润老师在2020年干了这样一件事情&#xff1a;向100个不认识的人学习。如&#xff0c;向…...

RK系列(RK3568) i2s 音频输入 麦克风驱动

平台&#xff1a;Android12SOC&#xff1a;RK3568外围芯片&#xff1a;XS9922i2s简介&#xff1a;从上图看I2s主要的线有&#xff1a;SDO SCLK LRCK MCLK I2S协议只定义三根信号线&#xff1a;串行时钟信号SCLK(BCLK)、数据信号SD和左右声道选择信号WS。&#xff08;1&#xff…...

Python|Pymol的安装

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

Mysql中关于查询日志的配置详解

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

外包整整干了一年,废了。。。

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

内网渗透(五十六)之域控安全和跨域攻击-非约束委派攻击

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

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...