最近在看vue3相关的的知识点,搜了下相关的开源项目,本地部署若依项目进行相关的学习.ruoyi是一个前后端分离的项目,前端是Vue,后端是Java,一个基于SpringBoot+Vue前后端分离的开源项目.下面对本地部署中遇到的相关问题总结记录下:

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

系统需求:

  • JDK >= 1.8
  • MySQL >= 5.7
  • Maven >= 3.0
  • redis>=3.0

(1).克隆项目到本地电脑

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

(2).安装项目对应所需的软件环境,记得修改maven的镜像地址为阿里云镜像
进入 maven 的安装目录,找到settings.xml

<mirror>
      <id>alimaven</id>
      <name>aliyun maven</name>
      <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
      <mirrorOf>central</mirrorOf>        
</mirror>

(3).将对应的数据库文件导入到本地数据库中,修改对应的数据库配置和redis配置文件,搜索相关的文件进行修改.还需开启redis服务器.

    redis-server

(4).进入到项目根目录下面,执行命令安装相应的依赖包

    mvn clean install

(5).进入到RuoYi-Vue/ruoyi-admin/target文件夹里面.执行以下命令:

    java -jar ruoyi-admin.jar

后端java项目默认的启动端口是:8080,还可以进行修改默认的启动端口:

    java -jar ruoyi-admin.jar --server.port=8066

或者修改项目文件夹下面ruoyi-admin/src/main/resources/application.yml中的

# 开发环境配置
server:
  # 服务器的HTTP端口，默认为8080
  port: 8066

(6).修改项目logs配置文件路径,不然启动一直报异常,日志文件找不到.

    <property name="log.path" value="" />

(7).修改路径配置后,记得重新打包生成jar的文件包.然后在启动项目.

    mvn clean install
页面效果

(8).后端项目本地启动后,默认的跑在8080端口.我们可以本地测试看下接口.下面验证码接口

页面效果

(9).前端项目的启动,进入项目文件夹ruoyi-ui,安装前端项目所需要的依赖.进入文件夹,执行

    npm install

项目依赖安装完成后,启动前端项目,执行命令

   npm run dev

(10).项目启动成功后,前端项目默认的端口是1024,后端默认的是8080,这时候我们访问页面,页面应该会报接口404的.我们需要配置nginx代理.注意关闭nginx默认的8080端口 (可以注释掉),nginx的配置如下:


server {
    listen 80;
    server_name localhost;
    location /dev-api/ {
            proxy_pass http://localhost:8080/;
    }
}

到此,项目前后端已经都可以正常跑起来啦.页面接口也没有报异常.我们就可以自己折腾折腾玩啦.

页面效果