记一次跑前端老项目的问题

记一次跑前端老项目的问题

一、前言

在一次跑前端老项目的时候,遇到了一些坑,这里记录一下。

二、过程

1、下载依赖

使用

powershell 复制代码
npm install

下载很久,然后给我报了个错

core-js@2.6.12: core-js@❤️.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

出现这个问题先看看有没有使用淘宝的镜像,或者使用过期的淘宝镜像

查看镜像地址,使用如下命令:

powershell 复制代码
npm config get registry

可以看到我这里还是默认的镜像地址,改为淘宝镜像的地址,这是最新的地址,地址如下:

https://registry.npmmirror.com

命令如下:

powershell 复制代码
npm config set registry https://registry.npmmirror.com

如果看到几年前的教程,可能淘宝镜像的地址是这样:

https://registry.npm.taobao.org

这个地址不能用了!!!

这个地址不能用了!!!

这个地址不能用了!!!

重要的事情说三遍,别问我怎么知道的。。。

如果是在近期看到这篇博客,可以用我前面的地址,如果几年后看到,建议先搜索一下最新的淘宝镜像地址。

回到正题,为了试试效果,这里删除 node_modules

重新下载

powershell 复制代码
npm install

如果此时卡在这里

core-js@2.6.12: core-js@❤️.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

Ctrl + C 退出,此应该升级 core-js 了,命令如下:

powershell 复制代码
npm i core-js

然后再删除 node_modules ,重新下载

powershell 复制代码
npm install

完成

2、启动项目

先看看能不能启动,先使用如下命令查看启动命令

powershell 复制代码
npm run

所以启动命令为:

powershell 复制代码
npm run serve

如果启动报如下错:

Error: error:0308010C:digital envelope routines::unsupported

这是因为 node 的版本高了,从图中可以看到我的 node 版本为 18 ,换回 17 及以下的版本即可解决。

也可以使用如下命令:

powershell 复制代码
$env:NODE_OPTIONS="--openssl-legacy-provider"

然后重新启动

powershell 复制代码
npm run serve

启动成功

3、打包

先试试能不能成功打包,命令如下:

powershell 复制代码
npm run build

如果出现如下错:

Error: Cannot find module 'imagemin-gifsicle'

需要删除 node_modules 中的 image-webpack-loader

然后使用如下命令更新下载:

powershell 复制代码
cnpm install --save-dev image-webpack-loader

如果使用命令报错

cnpm : 无法加载文件 C:\Users\33530\AppData\Roaming\npm\cnpm.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Poli

cies。

千万不能使用 npm install --save-dev image-webpack-loader 下载,如果使用此命令下载不会报错,看起来是成功了,但是打包会报错。。。

别试了,我已经试过了,不行

此时应该以管理员的身份打开命令行窗口,输入如下命令

powershell 复制代码
set-ExecutionPolicy RemoteSigned 

然后安装 cnpm ,命令如下:

powershell 复制代码
npm install -g cnpm --registry=https://registry.npmmirror.com

我这里因为安装过了,所以比较快,安装完成后再使用如下命令:

powershell 复制代码
cnpm install --save-dev image-webpack-loader

下载完成后再次打包

powershell 复制代码
npm run build

打包成功

相关推荐
老坛00116 分钟前
2025决策延迟的椭圆算子分析:锐减协同工具的谱间隙优化
前端
老坛00117 分钟前
从记录到预测:2025新一代预算工具如何通过AI实现前瞻性资金管理
前端
今禾20 分钟前
" 当Base64遇上Blob,图像转换不再神秘,让你的网页瞬间变身魔法画布! "
前端·数据可视化
华科云商xiao徐24 分钟前
高性能小型爬虫语言与代码示例
前端·爬虫
十盒半价25 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
攀登的牵牛花26 分钟前
Electron+Vue+Python全栈项目打包实战指南
前端·electron·全栈
iccb101326 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
一大树27 分钟前
Vue3祖孙组件通信方法总结
前端·vue.js
不要进入那温驯的良夜28 分钟前
跨平台UI自动化-Appium
前端
海底火旺29 分钟前
以一个简单的React应用理解数据绑定的重要性
前端·css·react.js