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

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


写在最前面

实验室电脑,需要跑一个前后端分离的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

成功运行!


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

目录
相关文章
|
5月前
|
安全 Java API
Java Web 在线商城项目最新技术实操指南帮助开发者高效完成商城项目开发
本项目基于Spring Boot 3.2与Vue 3构建现代化在线商城,涵盖技术选型、核心功能实现、安全控制与容器化部署,助开发者掌握最新Java Web全栈开发实践。
571 1
|
6月前
|
前端开发 Java API
2025 年 Java 全栈从环境搭建到项目上线实操全流程指南:Java 全栈最新实操指南(2025 版)
本指南涵盖2025年Java全栈开发核心技术,从JDK 21环境搭建、Spring Boot 3.3实战、React前端集成到Docker容器化部署,结合最新特性与实操流程,助力构建高效企业级应用。
1989 1
|
5月前
|
IDE 安全 Java
Lombok 在企业级 Java 项目中的隐性成本:便利背后的取舍之道
Lombok虽能简化Java代码,但其“魔法”特性易破坏封装、影响可维护性,隐藏调试难题,且与JPA等框架存在兼容风险。企业级项目应优先考虑IDE生成、Java Records或MapStruct等更透明、稳健的替代方案,平衡开发效率与系统长期稳定性。
254 1
|
5月前
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
1236 14
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
451 0
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
618 6