公司项目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相关推荐
- Vue 2项目如何升级到Vue 3?
应不应该从 Vue 2 升级到 Vue 3 应不应该升级?这个问题不能一概而论. 首先,如果你要开启一个新项目,那直接使用 Vue 3 是最佳选择.后面课程里,我也会带你使用 Vue 3 的新特性和新 ...
- vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6. You may want to run the
提示:vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6. You may want to run the f ...
- vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6. You may want to run the f
vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6. You may want to run the fo ...
- vue cli项目升级--vue cli3升级到vue cli4
原文网址:vue cli项目升级--vue cli3升级到vue cli4_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍如何升级vue项目的vue cli版本. 官方网址 https://c ...
- 七、Vue cli详解学习笔记——什么是Vue cli ,Vue cli的使用(安装,拉取2.x模板,初始化项目),Vue cli2详解,Runtime-Compiler和Runtime-only区别
一.什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时 ...
- vue Cli3与vue Cli2的改变
vue Cli3与vue Cli2的区别 常用命令 官方文档 创建文件 启动项目 目录结构 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 常用命令 vue -V 查看本地 vue ...
- Java毕设项目钢材商贸公司网络购销管理系统(java+VUE+Mybatis+Maven+Mysql)
Java毕设项目钢材商贸公司网络购销管理系统(java+VUE+Mybatis+Maven+Mysql) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilde ...
- SSM毕设项目猎头公司网站系统pu0n9(java+VUE+Mybatis+Maven+Mysql)
SSM毕设项目猎头公司网站系统pu0n9(java+VUE+Mybatis+Maven+Mysql) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX ...
- 记一次Vue框架升级
框架升级背景 公司目前业务迭代很快,且大部分的流量都在公众号上.然而我们公众号所使用的框架却是3年前的Vue 1.0.16.面对Vue这3年来带来的无数新特性,我们只能望洋兴叹:看得见,摸不着,因为升 ...
最新文章
- Could not install packages due to an EnvironmentError: [Errno 28] No space left on device
- Nature:要想真正研究宿主-肠道微生物的相互作用,必须将相对定量变成绝对定量...
- AgentJob--修改操作系统时间对Job的影响
- 错误(活动)E0020未定义标识符 “_TCHAR“
- 史密斯圆图串并联口诀_看得懂的史密斯圆图(个人总结)
- 20180130之PYTHON学习笔记【PYTHON3写个自动听课功能】
- deno mysql_从 Node 到 Deno
- 【设计模式】第五章 责任链模式
- js 浮点数精度问题 可以用accounting.js解决
- 显示出eclipse文件层次
- OmniPlayer for Mac(全能视频播放器)中文版
- 帮助朋友干活,平生第一次收到月饼
- CSDN新版下载频道改版上线了
- FIT2CLOUD获网宿科技战略投资 深度聚焦混合云管理价值交付
- vue判断设备是手机端还是pc端
- fiddler+mitmproxy+夜神模拟器安装
- Vmware 8里运行冒险岛097——提取Vmware Tools源文件
- Linux下抓取log的方法
- 打怪升级,看俄罗斯小哥是如何从互联网转行到自动驾驶行业?
- Win10睡眠唤醒后显示网络电缆被拔出怎么办