Windows系统下,导入运行 RuoYi-Vue3 项目

基于SpringBoot+Vue3前后端分离的Java快速开发框架

一、后端

1.git下载代码

RuoYi-Vue:RuoYi-Vue: 基于SpringBoot,Spring Security,JWT,Vue & Element 的前后端分离权限管理系统

git clone https://gitee.com/y_project/RuoYi-Vue.git

2.下载并启动 redis

 Redis for Windows:Releases · tporadowski/redis

redis-server.exe redis.windows.conf

3.创建数据库,导入SQL文件,项目中配置数据库信息

4. idea打开项目,启动项目

如果遇到问题,请参考Windows系统下,使用TortoiseGit下载ruoyi代码,并导入运行ruoyi项目-CSDN博客

二、前端

1.git下载代码

RuoYi-Vue3:RuoYi-Vue3: (RuoYi)官方仓库 基于SpringBoot,Spring Security,JWT,Vue3 & Vite、Element Plus 的前后端分离权限管理系统

git clone https://gitee.com/ys-gitee/RuoYi-Vue3.git

2.vscode打开项目

# 进入项目文件夹
cd RuoYi-Vue3

# 命令打开vscode
code .

打开view -> terminal

# 安装依赖
npm install --registry=https://registry.npmmirror.com

# 本地开发 启动项目
npm run dev

# 前端访问地址 
http://localhost:80

3.遇到的问题

✘ [ERROR] Could not resolve "lodash-es"

    node_modules/lodash-unified/import.js:1:14:
      1 │ export * from 'lodash-es'
        ╵               ~~~~~~~~~~~

  You can mark the path "lodash-es" as external to exclude it from the bundle, which will remove
  this error and leave the unresolved path in the bundle.

D:\ruoyi_projects\RuoYi-Vue3\node_modules\esbuild\lib\main.js:1651
  let error = new Error(text);
              ^

Error: Build failed with 1 error:
node_modules/lodash-unified/import.js:1:14: ERROR: Could not resolve "lodash-es"
    at failureErrorWithLog (D:\ruoyi_projects\RuoYi-Vue3\node_modules\esbuild\lib\main.js:1651:15)
    at D:\ruoyi_projects\RuoYi-Vue3\node_modules\esbuild\lib\main.js:1059:25
    at D:\ruoyi_projects\RuoYi-Vue3\node_modules\esbuild\lib\main.js:1527:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}

Node.js v20.12.0

解决方法:

尝试删除了node_modules文件夹文件,重新安装包,无效,尝试以下操作:

npm view lodash-unified version

npm install lodash-unified

三、结果



 

### RuoYi-Vue 前后端分离运行教程与配置指南 #### 一、前后端分离架构概述 在现代 Web 开发中,前后端分离是一种常见的架构模式。在这种模式下,前端负责页面展示和用户体验逻辑,而后端则专注于数据处理和服务接口提供[^1]。 #### 二、获取 RuoYi-Vue 源码 要运行 RuoYi-Vue 的前后端分离版本,首先需要从官方渠道下载源码。访问若依官网 `http://www.ruoyi.vip/` 并通过顶部菜单栏中的【源码地址】选项找到对应的前后端分离版链接进行克隆或下载[^3]。 #### 三、环境准备 为了顺利运行项目,需确保本地已安装以下工具: - **Node.js**: 版本建议为 LTS 或稳定版。 - **npm/yarn**: 用于管理前端依赖项。 - **Java JDK**: 推荐使用 Java 8 及以上版本。 - **Maven**: 构建后端项目的必备工具。 - **MySQL**: 数据库支持,默认情况下 RuoYi 使用 MySQL 存储数据。 #### 四、后端服务启动 1. 打开后端工程目录并导入到 IDE 中(如 IntelliJ IDEA)。 2. 修改数据库连接配置文件 `application.yml`,设置适合的数据库用户名、密码以及 URL 地址。 3. 启动 Spring Boot 应用程序入口类 `RuoYiApplication.java`。 4. 如果一切正常,控制台会显示应用成功启动的消息,并提示 API 访问路径。 #### 五、前端构建与运行 1. 切换至前端工程根目录,在此执行如下命令初始化 npm 包: ```bash npm install ``` 2. 完成依赖加载后,继续输入以下指令完成生产环境下的打包操作: ```bash npm run build ``` 3. 对于 Windows 用户而言,可以直接利用上述单条语句实现自动化流程;不过在此之前务必确认线上环境变量已被正确定义[^2]。 4. 若遇到类似 SCSS 编译错误 (e.g., Recommendation: math.div(...)), 尝试升级 PostCSS 插件或者调整样式计算表达式以匹配最新语法标准[^4]: ```scss $arrow-offset: calc(#{$--tooltip-arrow-size} / 2); ``` #### 六、部署上线 当测试无误之后可以考虑将静态资源上传至 CDN 或者 Nginx 等服务器上托管起来,同时保持后台 RESTful APIs 正常对外暴露供调用。 ```javascript // 示例:Nginx 配置片段 server { listen 80; server_name example.com; location /api/ { proxy_pass http://localhost:8080/; } location / { root /path/to/dist; index index.html; } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你喜欢喝可乐吗?

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值