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

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

  • 一、前言
  • 二、过程
    • 1、下载依赖
    • 2、启动项目
    • 3、打包

一、前言

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

二、过程

1、下载依赖

使用

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.

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

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

npm config get registry

在这里插入图片描述

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

https://registry.npmmirror.com

命令如下:

npm config set registry https://registry.npmmirror.com

在这里插入图片描述

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

https://registry.npm.taobao.org

这个地址不能用了!!!
这个地址不能用了!!!
这个地址不能用了!!!

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

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

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

在这里插入图片描述

重新下载

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 了,命令如下:

npm i core-js

在这里插入图片描述

然后再删除 node_modules ,重新下载

npm install

在这里插入图片描述

完成

2、启动项目

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

npm run

在这里插入图片描述

所以启动命令为:

npm run serve

在这里插入图片描述

如果启动报如下错:

在这里插入图片描述

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

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

也可以使用如下命令:

$env:NODE_OPTIONS="--openssl-legacy-provider"

在这里插入图片描述

然后重新启动

npm run serve

在这里插入图片描述

启动成功

3、打包

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

npm run build

如果出现如下错:

在这里插入图片描述

Error: Cannot find module ‘imagemin-gifsicle’

需要删除 node_modules 中的 image-webpack-loader
在这里插入图片描述

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

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 下载,如果使用此命令下载不会报错,看起来是成功了,但是打包会报错。。。

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

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

set-ExecutionPolicy RemoteSigned 

在这里插入图片描述

然后安装 cnpm ,命令如下:

npm install -g cnpm --registry=https://registry.npmmirror.com

在这里插入图片描述

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

cnpm install --save-dev image-webpack-loader

下载完成后再次打包

npm run build

在这里插入图片描述

打包成功

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/929872.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

无约束最优化问题的求解算法

无约束最优化问题的求解算法 使用梯度下降法目的和原因 目的 梯度下降法(Gradient Descent)是一个算法,但不是像多元线性回归那样是一个具体做回归任务的算法,而是一个非常通用的优化算法来帮助一些机器学习算法求解出最优解的,所谓的通用就是…

VideoBooth: Diffusion-based Video Generation with Image Prompts

VideoBooth: Diffusion-based Video Generation with Image Prompts 概括 文章提出了一个视频生成模型VideoBooth,输入一张图片和一个文本提示词,即可输出保持图片中物体且符合文本提示词要求的视频。 方法 粗-细两阶段设计:1)…

AndroidAutoSize实战教程:今日头条屏幕适配方案详解

如何在项目中结合 AndroidAutoSize 来进行今日头条屏幕适配,我会具体讲解如何用 AndroidAutoSize 实现屏幕适配,并结合 Kotlin 代码举例分析。 通过 AndroidAutoSize 库来实现屏幕适配,确保在不同的屏幕尺寸、分辨率、密度下,应用…

为什么使用3DMAX插件会出现系统崩溃?

使用3DMAX插件时出现系统崩溃,可能涉及多个方面的原因。以下是一些主要的原因及相应的解决方案: 一、插件兼容性问题 版本不兼容: 旧版插件可能无法与最新版本的3DMAX完全兼容,导致系统崩溃。解决方案:更新插件至最新…

[pdf,epub]228页《分析模式》漫谈合集01-45提供下载

《分析模式》漫谈合集01-45的pdf、epub文件提供下载。已上传至本号的CSDN资源。 如果CSDN资源下载有问题,可到umlchina.com/url/ap.html。 已排版成适合手机阅读,pdf的排版更好一些。 ★UMLChina为什么叒要翻译《分析模式》? ★[缝合故事]…

Python 【图像分类】之 PyTorch 进行猫狗分类功能的实现(Swanlab训练可视化/ Gradio 实现猫狗分类 Demo)

Python 【图像分类】之 PyTorch 进行猫狗分类功能的实现(Swanlab训练可视化/ Gradio 实现猫狗分类 Demo) 目录 Python 【图像分类】之 PyTorch 进行猫狗分类功能的实现(Swanlab训练可视化/ Gradio 实现猫狗分类 Demo) 一、简单介绍 二、PyTorch 三、CNN 1、神经网络 2、卷…

HarmonyOS开发:关于签名信息配置详解

目录 前言 签名信息的重要性 签名的方式 自动化签名 1、连接真机 2、选择 手动签名 (一)生成密钥和证书请求文件 (二)申请调试证书 (三)注册调试设备 (四)申请调试Profil…

Java的Stirng、StringBuilder、StringJoiner

黑马程序员Java个人笔记 目录 字符串比较 比较 boolean equals boolean equalsIgnoreCase 键盘录入和定义的字符串的比较 StringBuilder 打印 ​编辑 添加元素 反转 获取长度 toString 练习 对称字符串 拼接字符串 StringJoiner 概述 ​编辑 构造方法 只有…

fastadmin 后台插件制作方法

目录 一:开发流程 二:开发过程 (一):后台功能开发 (二):功能打包到插件目录 (三):打包插件 (四):安装插件…

视频自学笔记

一、视频技术基本框架 二、视频信号分类 2.1信号形式 2.1.1模拟视频 模拟视频是指由连续的模拟信号组成的视频图像,以前所接触的电影、电视都是模拟信号,之所以将它们称为模拟信号,是因为它们模拟了表示声音、图像信息的物理量。摄像机是获…

Docker单机网络:解锁本地开发环境的无限潜能

作者简介:我是团团儿,是一名专注于云计算领域的专业创作者,感谢大家的关注 座右铭: 云端筑梦,数据为翼,探索无限可能,引领云计算新纪元 个人主页:团儿.-CSDN博客 目录 前言&#…

Golang 八股(持续补充...)

目录 进程、线程、协程 Go语言——垃圾回收 GC的触发条件 GC调优 GMP调度和CSP模型 Groutine的切换时机 Goroutine调度原理 Goroutine的抢占式调度 Context结构原理 Context原理 Golang内存分配机制 竞态、内存逃逸 golang内存对齐机制 golang中new和make的区别&a…

手机中的核心SOC是什么?

大家好,我是山羊君Goat。 常常听说CPU,中央处理器等等的,它是一个电脑或单片机系统的核心,但是对于SOC可能相比于CPU了解的人没有那么广泛。 所以SOC是什么? SOC全称是System on Chip,就是片上系统&#…

绿虫光伏设计系统:清洁能源的未来

煤炭、石油、天然气是我们现在依赖的重要能源,但这些能源难以再生,而且开采过程中会产生污染。太阳能发电作为清洁能源的一种重要形式,受到了越来越多的关注。绿虫光伏发电系统,不仅考虑到其发电效率,还可以考虑其经济…

R语言 | ComplexHeatmap 画注释若干基因的热图 //todo

一般顺序: 先用 pheatmap 聚类再用 ComplexHeatmap 做可视化:添加顶部、左侧聚类颜色,显示若干代表性基因 genec("Gene18", "Gene19", "Gene7","Gene3", "Gene9", "Gene15") …

springmvc的简介

SpringMVC的介绍与第一个程序的开发步骤 1. 介绍 SpringMVC是一个实现了MVC架构模式的Web框架,底层基于Servlet实现。 SpringMVC已经将MVC架构模式实现了,因此只要我们是基于SpringMVC框架写代码,编写的程序就是符合MVC架构模式的。&#x…

Java Web 4 Maven

本文详细介绍了Maven的用途,包括依赖管理、项目结构统一和构建流程标准化;然后讲解了Maven的安装、IDEA中的集成以及依赖管理的核心概念。 1 什么是Maven? 什么是apache? 2 Maven的作用 (1)方便依赖管理 有…

基于SpringBoot+Vue的宠物咖啡馆系统-无偿分享 (附源码+LW+调试)

目录 1. 项目技术 2. 功能菜单 3. 部分功能截图 4. 研究背景 5. 研究目的 6. 可行性分析 6.1 技术可行性 6.2 经济可行性 6.3 操作可行性 7. 系统设计 7.1 概述 7.2 系统流程和逻辑 7.3 系统结构 8. 数据库设计 8.1 数据库ER图 (1)宠物订…

flex: 1 display:flex 导致的宽度失效问题

flex: 1 & display:flex 导致的宽度失效问题 问题复现 有这样的一个业务场景,详情项每行三项分别占33%宽度,每项有label字数不固定所以宽度不固定,还有content 占满标签剩余宽度,文字过多显示省略号, 鼠标划入展示…

利用tablesaw库简化表格数据分析

tableaw是处理表格数据的优秀工具。它提供了一组强大而灵活的功能,使操作、分析和可视化数据表变得容易。在这篇博文中,我们将介绍tableaw的主要特性、如何使用这些特性,以及如何使用tableaw处理表格数据的一些示例。 tablesaw简介 tableaw…