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

猜你喜欢

转载自blog.csdn.net/longgege001/article/details/129204368