【从0配置JAVA项目相关环境2】node.js + 前端 从配置到运行

运行前端项目

  • 写在最前面
  • 一、安装node.js
  • 二、运行前端项目
    • 1. 运行 `npm install`
    • 2. 运行 `npm run serve`
    • 报错`Error: error:0308010C:digital envelope routines::unsupported`
      • 方法1:设置 `NODE_OPTIONS` (没用)
      • 方法2:更改Node.js版本
      • 方法3:更新依赖项(用的这个,成功解决)
      • 方法4:检查webpack配置
    • 3. 运行 `npm run build`
    • 4. 前端访问

写在最前面

实验室电脑,需要跑一个前后端分离的JAVA项目,于是开始重新配置
全部(数据库+后端+前端)配置环境+修改代码 耗时6h,包括遇到各种坑,但总体而言弯路走的不多
如果跟着这篇博客走,理论上会避开我遇到的那些坑hh


请添加图片描述

对于前端开发者来说,我们也没有遗漏。文章将详细介绍如何安装Node.js并运行前端项目,包括如何处理常见的错误和配置问题。通过本文,你不仅能够搭建起一个完整的Java项目开发环境,还能获得处理潜在问题的实用技巧。

让我们开始吧!

一、安装node.js

Node.js下载地址:https://nodejs.org/en
下载20.10.0版本即可,下载后一路默认安装

在这里插入图片描述

安装完成后在命令行输入node -v,显示版本则安装成功

在这里插入图片描述

二、运行前端项目

要运行前端代码并配置依赖,可以按照 README 文件中提供的说明操作。这些说明通常是为了设置项目、安装依赖、运行开发服务器以及构建生产版本。

这里是一个基本的步骤指南:

  1. 确保您的计算机已安装 Node.js 和 npm。

  2. 项目设置(Project setup): 这是安装项目所需依赖的第一步。您需要在命令行中运行 npm install。这会根据 package.json 文件中列出的依赖项安装所有必需的依赖。

  3. 编译并热重载以便开发(Compiles and hot-reloads for development): 这一步是为了运行开发服务器。通过命令 npm run serve,项目会启动一个本地服务器,并且通常会在代码更改时自动重新加载页面。

  4. 编译并压缩以便生产(Compiles and minifies for production): 当您准备将应用部署到生产环境时,使用 npm run build 命令。这将创建一个压缩和优化的版本,通常放在项目的 dist/build/ 目录中。

在开始之前,请确保您位于包含前端代码的文件夹中。这意味着您应该在包含 package.json 文件的目录中打开命令行工具。

以下是具体的步骤:

1. 运行 npm install

运行 npm install ,以安装所有依赖。

在这里插入图片描述

2. 运行 npm run serve

为了开发,运行 npm run serve。这通常会在本地主机上的一个端口启动一个开发服务器(例如 http://localhost:8080)。
在这里插入图片描述

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

您遇到的错误信息是由于Node.js的一个版本兼容性问题。错误Error: error:0308010C:digital envelope routines::unsupported通常与Node.js的加密库和OpenSSL的版本有关。这个问题在Node.js 17及更高版本中比较常见,尤其是当它们与旧的或不兼容的依赖项一起使用时。

方法1:设置 NODE_OPTIONS (没用)

解决此问题的一个方法是通过设置环境变量来启用这些旧的加密算法。您可以在运行项目之前设置 NODE_OPTIONS 环境变量,以便允许使用这些算法。

在 Windows PowerShell 中,您可以通过以下命令来设置此环境变量:

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

在这里插入图片描述
在这里插入图片描述

然后再次尝试运行您的项目:

npm run serve

这个方法的好处是它不需要更改代码或项目配置。

方法2:更改Node.js版本

如果上述方法不起作用或您不想使用旧的加密算法,您可以考虑降级Node.js到一个更低的版本,比如16.x。较低版本的Node.js不会遇到这个特定的兼容性问题。使用NVM(Node版本管理器)可以轻松切换Node.js的版本。

方法3:更新依赖项(用的这个,成功解决)

有时,项目依赖项的旧版本可能不兼容最新版本的Node.js。检查并更新您的项目依赖项可能有助于解决这个问题。可以通过运行npm update来更新依赖项。

方法4:检查webpack配置

由于错误中提到了webpack,可能需要检查并确保您的webpack配置与您使用的Node.js版本兼容。确保您使用的webpack和相关加载器/插件都是最新的。

3. 运行 npm run build

当准备好将项目部署到生产环境时,运行 npm run build
在这里插入图片描述

4. 前端访问

#账号
admin

#密码
666666

成功运行!


如果有任何问题,欢迎提问和交流!

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

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

相关文章

2023字节跳动软件测试工程师面试题及答案分享

相信大家都有这样一个忧虑就是面试,不管我们要找什么工作,面试都会是必不可少的,下面是整理出来的面试题和我的一些见解觉得不对的在评论区留言! 1、什么是兼容性测试?兼容性测试侧重哪些方面? 参考答案&…

2022年拉丁美洲中东和非洲医疗机器人市场及全球概况报告

今天分享的是机器人系列深度研究报告:《2022年拉丁美洲中东和非洲医疗机器人市场及全球概况报告》。 (报告出品方:Apollo Reports) 报告共计:195页 研究方法论 2.1通过桌面研究和内部存储库的假设 a)最初&#xff…

多传感器融合SLAM在自动驾驶方向的初步探索的记录

1. VIO的不可观问题 现有的VIO都是解决的六自由度的问题, 但是对于行驶在路面上的车来说, 通常情况下不会有roll与z方向的自由度, 而且车体模型限制了不可能有纯yaw的变换. 同时由于IMU在Z轴上与roll, pitch上激励不足, 会导致IMU在初始化过程中尺度不准以及重力方向估计错误,…

AWS 日志分析工具

当您的网络资源托管在 AWS 中时,需要定期监控您的 AWS CloudTrail 日志、Amazon S3 服务器日志和 AWS ELB 日志等云日志,以降低任何潜在的安全风险、识别严重错误并确保满足所有合规性法规。 什么是 Amazon S3 Amazon Simple Storage Service&#xff…

C#图像处理OpenCV开发指南(CVStar,07)——通用滤波(Filter2D)的实例代码

1 函数定义 void Filter2D (Mat src, Mat dst, int ddepth, InputArray kernel, Point anchor Point(-1,-1), double delta 0, int borderType BORDER_DEFAULT ) 1.1 原型 #include <opencv2/imgproc.hpp> Convolves an image wit…

搜维尔科技:Varjo如何提高汽车设计和驾驶测试的生产力

增强和虚拟现实技术有助于提高汽车、航空航天、工业生产等各个领域的工人生产力。尽管这些应用程序的上下文通常相当具体&#xff0c;但其中许多用例的某些方面是通用的。 在本文中&#xff0c;我们将具体探讨基于LP-RESEARCH的LPVR操作系统的 Varjo头戴式显示器的姿态跟踪主题…

AI伦理专题报告:2023年全球人工智能伦理治理报告

今天分享的是人工智能系列深度研究报告&#xff1a;《AI伦理专题报告&#xff1a;2023年全球人工智能伦理治理报告》。 &#xff08;报告出品方&#xff1a;钛媒体&#xff09; 报告共计&#xff1a;239页 摘要 人工智能(ArtificialIntelligence)作为新一轮科技革命和产业变…

Linux(centos)学习笔记(初学)

[rootlocalhost~]#:[用户名主机名 当前所在目录]#超级管理员标识 $普通用户的标识 Ctrlshift放大终端字体 Ctrl缩小终端字体 Tab可以补全命令 Ctrlshiftc/V复制粘贴 / &#xff1a;根目录&#xff0c;Linux系统起点 ls&#xff1a; #list列出目录的内容&#xff0c;通常用户查看…

Python BeautifulSoup 选择器无法找到对应元素(异步加载导致)

文章目录 问题原因解决方案找到包含内容的 XHR 异步请求无头浏览器 个人简介 问题 使用 Python BeautifulSoup 爬取一个股吧帖子发现某个样式无法找到&#xff0c;但是在网页中确实存在这个元素&#xff1a;网页使用 document.querySelector 可以正常查找&#xff1a; 但是 Py…

Http请求(bug)——路径变量传参遇到特殊符号的问题 URL中的#,?,符号作用

前言 本篇博客分析路径变量传参遇到特殊符号的问题&#xff0c;阐述了URL中的#&#xff0c;&#xff1f;&#xff0c;&符号作用。 目录 前言引出路径变量传参遇到特殊符号的问题问题描述问题分析 URL中的 #&#xff0c;&#xff1f;&#xff0c;&符号的作用URL中# 的作…

基于深度学习yolov5行人社交安全距离监测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介系统工作原理主要组成部分技术实现优势和特点应用场景和前景 二、功能三、系统四. 总结 一项目简介 基于深度学习 YOLOv5 的行人社交安全距离监测系统是一种…

2022年第十一届数学建模国际赛小美赛C题人类活动分类解题全过程文档及程序

2022年第十一届数学建模国际赛小美赛 C题 人类活动分类 原题再现&#xff1a; 人类行为理解的一个重要方面是对日常活动的识别和监控。可穿戴式活动识别系统可以改善许多关键领域的生活质量&#xff0c;如动态监测、家庭康复和跌倒检测。基于惯性传感器的活动识别系统用于通过…

学习记录---Kubernetes的资源指标管道-metrics api的安装部署

一、简介 Metrics API&#xff0c;为我们的k8s集群提供了一组基本的指标(资源的cpu和内存)&#xff0c;我们可以通过metrics api来对我们的pod开展HPA和VPA操作(主要通过在pod中对cpu和内存的限制实现动态扩展)&#xff0c;也可以通过kubectl top的方式&#xff0c;获取k8s中n…

近期复习三

目录 nginx.conf文件介绍 一.文件共享功能 1.清空html目录下文件并新建你要共享的文件 2.修改nginx.conf文件&#xff0c;开启autoindex功能 3.测试 二.状态模块 1.修改nginx.conf文件 2.测试 &#xff08;1&#xff09;使用刚才定义的IP/nginx_status进行访问 &#…

计算机图形图像技术(图像锐化处理与图像解析)

一、实验原理&#xff1a; 1、拓展Sobel算子锐化 void Sobel(Array src, Array dst, int ddepth, int dx, int dy, int ksize); ①参数&#xff1a;src为输入图像&#xff1b;dst为输出图像&#xff0c;大小和通道数与源图像一致&#xff0c;必要时重建&#xff1b;ddepth为目…

我把springboot项目从Java 8 升级 到了Java 17 的过程总结,愿为君提前踩坑!

项目从jdk8升级到jdk17&#xff0c;我不是为了追求java 17的新特性&#xff08;准确来说也还没有去了解有什么新特性&#xff09;&#xff0c;也不是为了准确与时俱进&#xff0c;永远走在java行列的最前端&#xff0c;纯粹因为项目需要&#xff0c;因为我们都知道&#xff0c;…

【华为数据之道学习笔记】3-1 基于数据特性的分类管理框架

华为根据数据特性及治理方法的不同对数据进行了分类定义&#xff1a;内部数据和外部数据、结构化数据和非结构化数据、元数据。其中&#xff0c;结构化数据又进一步划分为基础数据、主数据、事务数据、报告数据、观测数据和规则数据。 对上述数据分类的定义及特征描述。 分类维…

HarmonyOS学习--TypeScript语言学习(四)

注意&#xff1a;这只是我学习的笔记&#xff01;&#xff01;&#xff01; 注意&#xff1a;这只是我学习的笔记&#xff01;&#xff01;&#xff01; 注意&#xff1a;这只是我学习的笔记&#xff01;&#xff01;&#xff01; 本章目录如下&#xff1a; 一、对象 二、接口…

配置CentOS服务器以支持PHP

CentOS是一款优秀的开源服务器操作系统&#xff0c;为各种网络服务提供了强大的支持。为了使CentOS服务器能够支持PHP&#xff0c;我们需要进行一些必要的配置。下面将介绍配置CentOS服务器以支持PHP的关键步骤。 安装PHP 首先&#xff0c;需要安装PHP解释器。在CentOS上&…

[UIM]论文解读:subword Regularization: Multiple Subword Candidates

文章目录 一、完整代码二、论文解读2.1 介绍2.2 NMT2.3 Unigram language model2.4 subword 抽样2.5 效果 三、整体总结 论文&#xff1a;Subword Regularization: Improving Neural Network Translation Models with Multiple Subword Candidates 作者&#xff1a;Taku Kudo 时…