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

news/2024/11/28 22:17:32/

提示：【若依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_15">一、若依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部署简单，这里就不展示了！

总结

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