若依3.8.5版本vue-cli升级到 5.0.8碰到的一些问题

前言

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

添加配置

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