前言

最近公司需要开辟一个新项目,之前的项目都是基于若依很老的版本来做的,并且我们在一个项目里面发现,打包速度很慢,然后升级了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版本,更改依赖版本,然后拉取新的依赖

vue 官网2.7.0升级注意事项

修改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...

css module 是啥

解决办法

把 variables.scss 改成 variables.module.scss 然后再把引用这个文件的地方改掉就好了, 追求完美可以改下vuecli配置,改一下 ,可以保持引用不变,
  • 感觉就是那个版本里面改了处理,才会导致这个问题产生,没时间追究了, 等待有缘人带带我

打包报错

TypeError: htmlWebpackPlugin.getHooks is not a function

报错信息

问题原因

解决方案

打包不分包:同样的配置, 在webpack4的时候都可以分包,webpack5的时候狗带

项目配置

问题原因

element 按需加载

yarn babel-plugin-component -D

添加配置

大概就是这样啦,虽然还有很多没做,哈哈


qinyuanqiblog
17 声望3 粉丝

擅长摸鱼~