gitlab cicd过程,使用docker部署Vue3前端项目,报错如下:
针对 npm ERR! cb() never called! 这个报错,网上有很多解决方案,大都是清空缓存,重新运行npm 之类的。笔者全都试过,无法解决问题。笔者遇到的问题比较特殊,分析如下:
1、这个项目是2年前建立的,当时的Vue3版本还比较低,使用的node版本是v14.18.1,就在不久前,node官方不再支持node14,才造成打包报错。
2、基于docker文件先打出docker包,gitlab的CICD每次包pipline时都会新建一个docker容器,重新执行npm install 命令;
npm install 无论是否增加代理,都会连到npm官方库拉取安装包,node:v14.18.1对应的npm包已经无法拉取完整的了。
解决:
1、升级node到v16.
2、针对package.json的所有依赖全部清空,然后 针对老的依赖中的每个依赖包单独执行 npm i <package>,如:
npm i moment --save
复制
安装过程中可能会出现依赖的问题,如下。这个报错就是不知道依赖的Vue是哪个版本,因此也无法安装具体的依赖。解决方法是先安装Vue3的某个版本。
npm i pinia --save npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: knowledgehub@0.0.0 npm ERR! Found: vue@3.4.13 npm ERR! node_modules/vue npm ERR! peer vue@"^3.2.0" from @element-plus/icons-vue@2.3.1 npm ERR! node_modules/@element-plus/icons-vue npm ERR! @element-plus/icons-vue@"^2.3.1" from element-plus@2.8.0 npm ERR! node_modules/element-plus npm ERR! element-plus@"^2.8.0" from the root project npm ERR! peer vue@"^3.2.25" from @vitejs/plugin-vue@2.3.4 npm ERR! node_modules/@vitejs/plugin-vue npm ERR! dev @vitejs/plugin-vue@"^2.3.4" from the root project npm ERR! 4 more (@vue/server-renderer, vue-demi, vue-demi, element-plus) npm ERR! npm ERR! Could not resolve dependency: npm ERR! pinia@"*" from the root project npm ERR! npm ERR! Conflicting peer dependency: vue@2.6.14 npm ERR! node_modules/vue npm ERR! peer vue@">= 2.5 < 2.7" from @vue/composition-api@1.7.2 npm ERR! node_modules/@vue/composition-api npm ERR! peerOptional @vue/composition-api@"^1.4.0" from pinia@2.2.1 npm ERR! node_modules/pinia npm ERR! pinia@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users\jianjuns\AppData\Local\npm-cache\eresolve-report.txt for a full report.
复制
3、先执行需要安装的Vue3的版本
npm i vue@3.2.37 --save // 此处必须指定Vue3的版本,Vue的版本指定后,其他包的版本会自动指定 npm i vue-axios --save npm i vue-cropper --save npm i vue-cropper --save
复制
原来的package.json文件如下:
全部依赖更新完成后的截图如下:
观察后可见,vue版本和各个依赖的包的版本都升级到了最新的版本。
修改完成后,重新提交发布,发布成功。
终极解决:
几周后发现升级后的方案也出现了npm下载不完善,打包失败的问题。又经过一番调查发现,这主要是我们都知道的层面封闭了国外下载源导致的。无法连到国外仓库下载,就连到国内仓库好了。
国内有众多的npm仓库,列举如下:
- 淘宝npm镜像:淘宝镜像是目前国内使用较为广泛的npm镜像之一,其地址为
https://registry.npmmirror.com/
。 - 腾讯云npm镜像:腾讯云提供的npm镜像地址为
https://mirrors.cloud.tencent.com/npm/
。 - 华为云npm镜像:华为云的npm镜像地址是
https://mirrors.huaweicloud.com/repository/npm/
。 - 阿里云npm镜像:阿里云提供的npm镜像地址是
https://registry.npm.alibaba-inc.com/
。
这里要特别提一下 淘宝npm地址由原来的 https://registry.npm.taobao.org/ 换成了现在的 https://registry.npmmirror.com/ 不过原来的继续可以使用。
连接到国内镜像源后,因为都是https的请求,增加一个命令
npm config set strict-ssl false复制
便可正常访问了。
完整的配置如下:
npm config set registry https://registry.npmmirror.com/ npm config set strict-ssl false npm install
复制
复制