【从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

成功运行!


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

目录
相关文章
|
6天前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
50 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
7天前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
54 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
6天前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
40 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
10天前
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
55 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
27天前
|
Java Linux iOS开发
如何配置 Java 环境变量:设置 JAVA_HOME 和 PATH
本文详细介绍如何在Windows和Linux/macOS系统上配置Java环境变量。
765 12
|
26天前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
53 10
|
27天前
|
前端开发 NoSQL Java
【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
本文介绍了如何配置和启动基于Java的若依(RuoYi)项目,涵盖后端和前端的详细步骤。首先,准备Redis、MySQL以及IDE(如Idea和VS)。接着,通过GitHub获取代码并导入到IDE中,执行必要的SQL文件和配置数据库密码。然后,启动Redis并进行相关配置。最后,按照前端配置步骤克隆前端代码库,打开终端执行命令完成前端配置。整个过程详细记录了每一步的操作,帮助开发者顺利部署若依项目。 如果你觉得有帮助,请点赞、关注和收藏,这将是我持续分享的动力!
273 1
|
27天前
|
前端开发 Java 开发工具
Git使用教程-将idea本地Java等文件配置到gitte上【保姆级教程】
本内容详细介绍了使用Git进行版本控制的全过程,涵盖从本地仓库创建到远程仓库配置,以及最终推送代码至远程仓库的步骤。
32 0
|
JavaScript Java
java中调用js代码
java中调用js代码
329 0
java中调用js代码
|
4天前
|
安全 Java 程序员
Java 面试必问!线程构造方法和静态块的执行线程到底是谁?
大家好,我是小米。今天聊聊Java多线程面试题:线程类的构造方法和静态块是由哪个线程调用的?构造方法由创建线程实例的主线程调用,静态块在类加载时由主线程调用。理解这些细节有助于掌握Java多线程机制。下期再见! 简介: 本文通过一个常见的Java多线程面试题,详细讲解了线程类的构造方法和静态块是由哪个线程调用的。构造方法由创建线程实例的主线程调用,静态块在类加载时由主线程调用。理解这些细节对掌握Java多线程编程至关重要。
32 13

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 3
    docker安装nginx,前端项目运行
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 5
    详解智能编码在前端研发的创新应用
  • 6
    巧用通义灵码,提升前端研发效率
  • 7
    【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 10
    智能编码在前端研发的创新应用