当前位置: 首页 > news >正文

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

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

  • 一、前言
  • 二、过程
    • 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

在这里插入图片描述

打包成功

相关文章:

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

记一次跑前端老项目的问题 一、前言二、过程1、下载依赖2、启动项目3、打包 一、前言 在一次跑前端老项目的时候,遇到了一些坑,这里记录一下。 二、过程 1、下载依赖 使用 npm install下载很久,然后给我报了个错 core-js2.6.12: core-js…...

深度学习:MindSpore自动并行

随着模型规模的逐渐增大,需要的算力逐渐增强,但是算力需求增长速度远高于芯片算力增长速度。现在唯一的解决方案只有通过超大规模集群训练大模型。 大集群训练大模型的挑战 内存墙 200B参数量的模型,参数内存占用745GB内存,训练…...

python拆分Excel文件

按Sheet拆分Excel 或 按照某一列的不同值拆分Excel。文档样式如下: 结果:红色是按照Sheet名拆出的,蓝色和橙色是某个Sheet按照某列的不同值拆分的。 代码: # -*- coding: utf-8 -*- """ 拆分excel文件——按照…...

Python实现Excel中数据条显示

Python中要实现百分比数据条的显示,可以使用pandas库,pandas图表样式的设置与Excel中的条件格式设置比较类似,比如Excel里常用的数据条的用法,在pandas中使用代码进行高亮显示,用来突出重点数据,下面一起来…...

c#如何开发后端

1选择开发框架 在 C# 中,用于后端开发最常用的框架是ASP.NET。它提供了构建 Web 应用程序、Web API 和微服务等多种后端服务所需的功能。ASP.NET有不同的模式,如ASP.NET MVC(Model - View - Controller)和ASP.NET Web API。ASP.NE…...

6.Vue------async/await详细的讲解---知识积累

前提: 先说一下Promise解释 Promise是一种在JavaScript中处理异步操作的对象。它代表了一个尚未完成但承诺未来某个时间会完成的操作结果。Promise有三种状态:pending(等待中)、fulfilled(已成功)和reject…...

Redis面试专题-持久化

目录 前言 持久化相关知识 1.三种持久化机制 2.RDB持久化 3.深入剖析一下RDB持久化过程 4.AOF持久化 5.RDB和AOF对比​编辑 面试题 1.redis持久化机制有哪些? 2.那仔细讲讲你对他们的理解 3.你刚刚说AOF的文件很大,那AOF文件会越来越大&#xf…...

如何将快捷指令添加到启动台

如何将快捷指令添加到启动台/Finder/访达(Mac) 1. 打开快捷指令创建快捷指令 示例创建了一个文件操作测试的快捷指令。 2. 右键选择添加到程序坞 鼠标放在待添加的快捷指令上。 3. 右键添加到访达 鼠标放在待添加的快捷指令上。 之后就可以在启…...

ansible自动化运维(二)ad-hoc模式

目录 Ansible模块(ad-hoc模式) 1.command模块:远程执行命令 2.shell 模块:远程执行命令,支持管道,重定向 3.Raw模块:先登录,再执行,最后退出 4.Script模块&#xff…...

技术栈6:Docker入门 Linux入门指令

目录 1.Linux系统目录结构 2.处理目录的常用命令 3.Docker概述 4.Docker历史 5.Docker基本组成 6.Docker底层原理 7.Docker修改镜像源 8.Docker基本命令 9.Docker创建Nginx实战 10.数据卷 11.本地目录直接挂载* 12.镜像和dockerfile 13.容器互联与自定义网络 14.…...

OPStack Optimism Layer2

概述 OP Stack 是标准化、共享和开源的开发堆栈,为 Optimism 提供支持,由 Optimism Collective 维护。 Optimism Bedrock 是 OP Stack的当前版本。 Bedrock 版本提供了用于启动生产质量的 Optimistic Rollup 区块链的工具。此时,OP Stack不同层的 API 仍然与Stack的 Rollu…...

Leetcode—1498. 满足条件的子序列数目【中等】

2024每日刷题&#xff08;210&#xff09; Leetcode—1498. 满足条件的子序列数目 C实现代码 class Solution { public:int numSubseq(vector<int>& nums, int target) {const int MOD 1e9 7;int n nums.size();vector<int> pows(n, 1);for(int i 1; i &…...

生活大爆炸版石头剪刀布(洛谷P1328)

生活大爆炸版石头剪刀布(洛谷P1328) [NOIP2014 提高组] 前言&#xff1a; 由于洛谷发布题解有限制&#xff0c;所以在CSDN上发布洛谷题解。 所有题解均是Java语言, 但是思路是相同的 每篇都是刷题日常&#xff0c;尽量讲清楚算法逻辑。 希望有问题还请大佬们指导&#xff01; …...

OmniParser一种用于增强视觉语言模型与用户界面交互效果的技术

OmniParser一种用于增强视觉语言模型与用户界面交互效果的技术 OmniParser的核心功能是将用户界面截图转换为结构化元素&#xff0c;这一过程涉及几个关键步骤和技术要素&#xff0c;解决了视觉语言模型&#xff08;VLMs&#xff09;在与用户界面交互时所面临的多种挑战。 1.…...

Unity引擎UI滚动列表——滚动复用基础介绍

大家好&#xff0c;我是阿赵。 一、滚动复用的介绍 在制作游戏的过程中&#xff0c;经常会遇到一些需要显示数量比较大的数据的情况。比如说&#xff0c;一个排行榜&#xff0c;需要展示当前服务器前一千个玩家的排名。或者游戏的背包容量特别大&#xff0c;可以有几千个格子。…...

在 Windows 11 WSL (Ubuntu 24.04.1 LTS) | Python 3.12.x 下部署密码学库 charm

1. 在 Windows 11 上部署 Ubuntu (WSL) 由于作者没有高性能的 Ubuntu 服务器或个人电脑&#xff0c;且公司或学校提供的 Ubuntu 服务器虽然提供高性能 GPU 等硬件配置但通常不会提供 root 权限&#xff0c;因而作者通过在搭载了 Windows 11 的个人电脑上启动 Ubuntu (WSL) 来进…...

【六足机器人】01功能开发

包含&#xff1a;WIFI模块、GPS模块、语言模块、调试信息接口。 一、硬件连接 huart4&#xff08; PA0、 PA1 &#xff09;与GPS模块连接。 huart3&#xff08;PB10、PB11&#xff09;与ESP8266模块连接。 huart2&#xff08; PA2、 PA3 &#xff09;与语音模块连接。 hu…...

notepad++安装教程(超详细)

1.下载地址&#xff08;可以私信博主&#xff09; https://notepad-plus.en.softonic.com/download 2.解压安装...

创建简单的 PL/pgSQL 存储过程

文章目录 创建简单的 PL/pgSQL 存储过程CREATE OR REPLACE FUNCTIONadd_two_numbers(a integer, b integer)RETURNS integerAS$$ ... $$函数体LANGUAGE plpgsql 创建带有 IN 和 OUT 参数的存储过程创建修改数据的存储过程创建带有异常处理的复杂存储过程 在 PostgreSQL 中&…...

Java项目实战II基于微信小程序的无中介租房系统(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、核心代码 五、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 一、前言 随着城市化进程的加速&#xff0c;租房市场日益繁荣&a…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器

一、原理介绍 传统滑模观测器采用如下结构&#xff1a; 传统SMO中LPF会带来相位延迟和幅值衰减&#xff0c;并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)&#xff0c;可以去除高次谐波&#xff0c;并且不用相位补偿就可以获得一个误差较小的转子位…...