起因
起因是我要有一个老的vue2 + iview的项目,几年前的,一直在开发和维护,也不大可能转到vue3 ,然后新开发的项目都是vue3开发的,于是我之前费了一些功夫,把vue2的项目兼容度提高,支持到14版本的,然后去掉一些插件,逐渐换成只了支持16,后面就一直卡着不动了。今天升级vue3的某些插件的时候,终于打破了平衡,新的插件,16 版本nodejs 已经不支持了,要升级到18版本才行,但是vue2项目就不行了,怎么都启动成功。
找到原因
经过多次测试,和通过AI分析,总结的是 由于 Node.js 18 对 OpenSSL 3 的默认配置更严格导致的,主要影响了 Webpack 等工具的哈希算法使用。
解决办法
AI提供了很多解决办法,但是最简单的办法就是这个:
1.安装跨环境命令
npm install cross-env --save-dev
2.修改 package.json 把scripts中,所有 vue-cli-service 命令前面加上
cross-env NODE_OPTIONS=--openssl-legacy-provider
示例:启动和编译
"serve":"cross-env NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve --open"
"build":"cross-env NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve build"
这样项目就可以用nodejs 最新版本打包和运行了
build 的告警信息
build 项目的时候,会有告警信息,类似这样:
[buildVueCli ] Browserslist: caniuse-lite is outdated. Please run:
[buildVueCli ] npx update-browserslist-db@latest
按照要求执行这个命令即可:
npx update-browserslist-db@latest