若依前后端分离前端使用Vue3启动教程

136 篇文章 86 订阅 ¥99.90 ¥299.90

Vue3前端项目地址:https://github.com/yangzongzhuan/RuoYi-Vue3

若依前后端分离后端项目地址:https://gitee.com/y_project/RuoYi-Vue

vue3官网:https://v3.cn.vuejs.org/

本项目使用若依前后端分离的后端工程,前端是使用Vue3技术栈写的。

本教程主要讲解一下如何在本地进行启动和如何打包。

目录

一、拉取项目到本地

二、进入项目目录

三、安装依赖

四、启动服务

五、启动成功演示

​ 六、项目打包命令

(1)构建测试环境 

(2) 构建生产环境


一、拉取项目到本地

git clone https://github.com/yangzongzhuan/RuoYi-Vue3.git

二、进入项目目录

 cd RuoYi-Vue3

三、安装

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在Java前后分离的架构中,前端和后是独立部署的两个应用程序,因此后无法直接重定向到前端Vue页面。通常情况下,前端和后之间通过RESTful API进行通信,前端通过AJAX请求后API获取数据并渲染页面。 如果你需要实现后重定向到前端Vue页面,可以采取以下两种方式: 1. 通过HTTP代理实现重定向 在这种方式中,你可以在后应用程序中配置一个HTTP代理,将前端Vue应用程序的URL地址映射到后应用程序的URL地址。当客户请求前端Vue页面时,后应用程序会将请求转发到前端Vue应用程序,并将前端Vue应用程序的响应发送给客户浏览器。 下面是一个使用Nginx作为HTTP代理的示例配置: ``` location /vue-page { proxy_pass http://localhost:8080; } ``` 在上面的配置中,我们将请求URL地址中包含`/vue-page`的请求转发到`http://localhost:8080`地址。在这里,`http://localhost:8080`是前端Vue应用程序的地址。当客户请求`/vue-page`时,Nginx会将请求转发到前端Vue应用程序,并将前端Vue应用程序的响应发送给客户浏览器。 2. 重定向到前端路由地址 在这种方式中,你可以在后应用程序中将请求重定向到前端Vue应用程序的路由地址。当客户浏览器接收到重定向响应时,会自动跳转到前端Vue应用程序的路由地址,并显示对应的页面。 下面是一个使用Spring Boot实现后重定向到前端Vue页面的示例代码: ``` @Controller public class MyController { @RequestMapping("/vue-page") public String vuePage() { // 重定向到前端路由地址 return "redirect:/vue-page/home"; } } ``` 在上面的代码中,我们将请求重定向到前端Vue应用程序的`/vue-page/home`路由地址。当客户浏览器接收到重定向响应时,会自动跳转到前端Vue应用程序的`/vue-page/home`路由地址,并显示对应的页面。 需要注意的是,在采用这种方式时,前端Vue应用程序必须已经加载并启动,否则客户浏览器无法跳转到前端Vue应用程序的路由地址。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

Roc-xb

真诚赞赏,手留余香

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

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

打赏作者

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

抵扣说明:

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

余额充值