前言
最近公司需要开辟一个新项目,之前的项目都是基于若依很老的版本来做的,并且我们在一个项目里面发现,打包速度很慢,然后升级了cli的版本之后就好了,so,就把若依升级到最新的5.0.8版本
开搞
先从若依官网里面把最新的代码拉下来,然后升级vue cli 和 vue
jsx支持v-model
感觉这一步不用做,我把这个插件删除了,还是支持的,应该是cli 自带支持了
查看vue 升级指南,发现需要升级vue cli
升级vue cli
我的vue cli 版本
开始升级vue cli
- 当前若依的cli版本是 4.4.6
- 执行 vue upgrade 命令,然后确认升级
升级成功,重新跑一下项目
报错了,好像是webpack 4.0 配置和5.0 配置不一样的问题
如何解决
报错信息:BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default
解决方案
安装 npm install node-polyfill-webpack-plugin
然后在vue.config.json configureWebpack添加一下
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
configureWebpack: { plugins: [new NodePolyfillPlugin()]}
升级vue到2.7版本,更改依赖版本,然后拉取新的依赖
修改package.json, 然后重新拉取依赖: yarn
"vue": "^2.7.14"
"vue-template-compilere": "^2.7.14"
eslint 报错 [eslint] Cannot read property 'range' of null
问题截图
indent: 0,template-curly-spacing:0, 搞定,但是感觉会影响很大。。,这种相当于关闭当前这种校验
若依主题色狗带
问题原因是因为vuecli 删除了模块自动补全的设置:https://cli.vuejs.org/migrations/migrate-from-v4.html#typescr...
问题原因:调试了之后,发现是因为主题色没了, 原因是 :export语法在当前webpack版本不行了,
若依使用了这个工具: https://www.bluematador.com/blog/how-to-share-variables-betwe...
解决办法
把 variables.scss 改成 variables.module.scss 然后再把引用这个文件的地方改掉就好了, 追求完美可以改下vuecli配置,改一下 ,可以保持引用不变,
- 感觉就是那个版本里面改了处理,才会导致这个问题产生,没时间追究了, 等待有缘人带带我
打包报错
TypeError: htmlWebpackPlugin.getHooks is not a function
报错信息
问题原因
解决方案
打包不分包:同样的配置, 在webpack4的时候都可以分包,webpack5的时候狗带
项目配置
问题原因
element 按需加载
yarn babel-plugin-component -D
添加配置
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。