当前位置: 首页 > article >正文

【若依ruoyi Vue前端线上个人服务器部署】以及常见报错问题解决

提示:【若依ruoyi Vue前端线上个人服务器部署】以及常见报错问题解决

文章目录

  • 前言
  • 一、若依ruoyi Vue前端部署常见两种错误
    • 1、404问题
    • 2、找不到….模块
  • 二、使用步骤(正式开始)
    • 1.修改vue.config.js中的publicPath属性。
    • 2.修改router/index.js,添加一行base属性。
    • 3.给路径添加,防止每次跳转找不到其路径。
      • 1、修改layout/components/Navbar.vue中的location.href
      • 2、修改utils/request.js中的location.href
    • 4、在尾端,添加 resolve
    • 5、打包
    • 6、把默认的dist包,放到自己的服务器上面。
    • 7、Nginx配置(重要!!)
    • 8、访问
  • 总结


前言

【若依ruoyi Vue前端线上个人服务器部署】以及常见报错问题解决,跟着下面我的步骤,你会少采很多坑。


一、若依ruoyi Vue前端部署常见两种错误



下面遇到的问题,后面我们都会解决!!!


1、404问题

刷新主页、或者退出登录状态,都会报404问题。
在这里插入图片描述


2、找不到….模块

点击左侧的导航栏,点不动,控制台报错:

若依框架vue部署找不到模块(Error: Cannot find module ‘@/‘)


在这里插入图片描述





二、使用步骤(正式开始)



下面以: https://www.ruoyi.com/admin,为例,去讲解,按照下面流程修改。



1.修改vue.config.js中的publicPath属性。

 "/"        修改为    "/admin/"

在这里插入图片描述

这个是指定子路径,不然找不到。



2.修改router/index.js,添加一行base属性。

	原先没有这个属性,添加上去。(这一个非常重要!!!)

在这里插入图片描述
前缀。



3.给路径添加,防止每次跳转找不到其路径。


1、修改layout/components/Navbar.vue中的location.href

在前面添加/admin

在这里插入图片描述


2、修改utils/request.js中的location.href

	在前面添加/admin

在这里插入图片描述



4、在尾端,添加 resolve



在这里插入图片描述

这一步解决的就是:“点击左侧的导航栏,点不动,控制台报错:若依框架vue部署找不到模块(Error: Cannot find module ‘@/‘)” 解决的就是这个问题!!!




OK!!!,到这一步,全部完成!!!下面去打包!!!



5、打包



	输入指令:npm run build:prod


6、把默认的dist包,放到自己的服务器上面。





7、Nginx配置(重要!!)


下面的配置路径,注意和上面要去对应!!!


在这里插入图片描述

重启Nginx服务器,即可完成访问!!!




8、访问


然后就可以输入域名,访问线上若依系统。

在这里插入图片描述


OK!!!到这里就实现,把若依前端部署在自己的服务器上面,若依的后端,利用Docker部署简单,这里就不展示了!


总结

⁣⁣⁣⁣ ⁣⁣⁣⁣  ⁣⁣⁣⁣ ⁣⁣⁣⁣ 按照上面步骤,你就能实现需求,对应部分解决的什么,已经在上面展示。


http://www.kler.cn/a/413269.html

相关文章:

  • C中指针在64位操作系统下为什么是4而不是8
  • 苹果系统中利用活动监视器来终止进程
  • MySQL中的like模糊查询
  • 2024御网杯信息安全大赛个人赛wp(misc方向)
  • Adaboost集成学习 | Python实现基于NuSVR-Adaboost多输入单输出回归预测
  • 788页页大型集团财务集中管控平台项目总体规划方案全文深入解读
  • 2024年11月27日Github流行趋势
  • 【Flink-scala】DataStream编程模型之 窗口的划分-时间概念-窗口计算程序
  • Day28 贪心算法 part02
  • CTF之密码学(费纳姆密码)
  • LLamafactory API部署与使用异步方式 API 调用优化大模型推理效率
  • 初识Linux(4):Linux基础环境工具(下)
  • YOLO的框架及版本迭代
  • Mac安装及合规无限使用Beyond Compare
  • Linux iptables 命令详解
  • 【设计模式】【结构型模式(Structural Patterns)】之享元模式(Flyweight Pattern)
  • 八、利用CSS制作导航栏菜单的习题
  • Easyui 实现订单拆分开票功能
  • 算法新篇章:AI如何在数学领域超越人类
  • 【CSS in Depth 2 精译_061】9.4 CSS 中的模式库 + 9.5 本章小结
  • python的openpyxl库设置表格样式:字体/边框/对齐/颜色等
  • ES6中,Set和Map的区别 ?
  • DFS练习题 ——(上)
  • CentOS8.5.2111(7)完整的Apache综合实验
  • maxun爬虫工具docker搭建
  • Java八股(一)