若依3.8.5版本vue-cli升级到 5.0.8碰到的一些问题
# 前言
最近公司需要开辟一个新项目，之前的项目都是基于若依很老的版本来做的，并且我们在一个项目里面发现，打包速度很慢，然后升级了cli的版本之后就好了，so，就把若依升级到最新的5.0.8版本
# 开搞
# 先从若依官网里面把最新的代码拉下来，然后升级vue cli 和 vue
# jsx支持v-model (opens new window)
感觉这一步不用做，我把这个插件删除了，还是支持的，应该是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
# 解决方案 (opens new window)
安装 npm install node-polyfill-webpack-plugin 然后在vue.config.json configureWebpack添加一下
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
configureWebpack: { plugins: [new NodePolyfillPlugin()]}
2
# 升级vue到2.7版本，更改依赖版本，然后拉取新的依赖
vue 官网2.7.0升级注意事项 (opens new window)
修改package.json, 然后重新拉取依赖: yarn
"vue": "^2.7.14"
"vue-template-compilere": "^2.7.14"
2
3
# eslint 报错 [eslint] Cannot read property 'range' of null
问题截图
indent: 0,template-curly-spacing:0, 搞定，但是感觉会影响很大。。，这种相当于关闭当前这种校验
# 若依主题色狗带
问题原因是因为vuecli 删除了模块自动补全的设置：https://cli.vuejs.org/migrations/migrate-from-v4.html#typescript-plugin (opens new window)
问题原因：调试了之后，发现是因为主题色没了， 原因是 ：export语法在当前webpack版本不行了，
若依使用了这个工具： https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass (opens new window)
css module 是啥 (opens new window)
# 解决办法
把 variables.scss 改成 variables.module.scss 然后再把引用这个文件的地方改掉就好了， 追求完美可以改下vuecli配置，改一下 ，可以保持引用不变，
- 感觉就是那个版本里面改了处理，才会导致这个问题产生，没时间追究了， 等待有缘人带带我
# 打包报错
TypeError: htmlWebpackPlugin.getHooks is not a function
报错信息
问题原因
解决方案
打包不分包：同样的配置， 在webpack4的时候都可以分包，webpack5的时候狗带
项目配置
问题原因
# element 按需加载 (opens new window)
yarn babel-plugin-component -D
添加配置
