若依 从下载到成功运行及打包

官网:http://www.ruoyi.vip/ 

目录

一、下载并运行项目

二、关于 若依 接口地址配置

2.1 若依的跨域代理介绍 

2.2 配置跨域代理,调用后台接口

2.2.1 配置 后台 ip 地址

2.2.2 页面报“系统接口404”错误

三、打包配置

3.1 打包之后静态资源404

3.2 登录页登录成功之后 vue 版菜单点不开,报错:Error: Cannot find module ‘@/views/system/user/index’

3.3 登录之后跳转页面显示 404


一、下载并运行项目

        进入官网 → 点击“源码地址” → 点击“RuoYi-Vue前端分离版” → 复制Git地址(https://gitee.com/y_project/RuoYi-Vue.git)→ 新建文件夹,在该文件夹中打开Git小乌龟输入:git clone 地址

         下载完成之后,找到“ruoyi-ui”文件夹,进入“ruoyi-ui”文件夹,在该文件夹下下载依赖“npm install”,这一步建议在 VsCode 终端中进行,防止出错。接下来在VsCode 终端里输入“npm run dev”就能运行该项目了。

二、关于 若依 接口地址配置

        npm run dev 打开项目后,报接口404:

  

2.1 若依的跨域代理介绍 

         原因是项目配置的接口是 localhost上 的,本地没有这个接口,肯定会报404。调用后台接口,在本地运行需要修改配置。

        若依的接口配置采用的跨域代理,跟我们平时项目中做的跨域代理一样,也是在 根目录/vue.config.js 中配置。点击文件中注释的 detail 的链接就可以打开 vue.config.js配置文档

vue.config.js 中配置属性具体的值 :DevServer | webpack 中文文档

  • devServer:跨域代理的相关配置
  • host:指定要使用的 host。如果你想让你的服务器可以被外部访问:host: '0.0.0.0'
  • port::指定监听请求的端口号
  • open:告诉 dev-server 在服务器已经启动后打开浏览器。设置其为 true 以打开你的默认浏览器。
  • proxy:关于devServer.proxy配置-【DevServer | webpack 中文文档
    • 对照以下示例,就能明白 若依 中这个跨域代理是怎么回事:
    • pathRewrite:将 target 部分重写路径,即将 /api 替换成:target+pathRewrite中“^/api”的值,如上,请求接口地址变成了:http:AA.BB.CC.DD:端口//connect。
  • [process.env.VUE_APP_BASE_API]:这个值来自根目录下的 .env.development, .env.production, .env.staging 这 3 个文件,分别代表:开发环境、生产环境、预生产环境。
    • 如上分析,我们现在是在开发环境下打开的,仔细观察报404接口错误的地方,请求网址是:http://localhost:81/dev-api/getInfo ,其中“/dev-api”来自 .env.development 文件中设置的 VUE_APP_BASE_API 的值。
  • target:指向接口请求地址。

2.2 配置跨域代理,调用后台接口

2.2.1 配置 后台 ip 地址

         根据 2.1 中的介绍,要调用后台接口,我们只要将 target 的值修改为 后台 ip 地址和端口号。修改完成之后,需要重新启动项目npm run dev),接口请求地址才会改变。

        需要注意一个地方:后台如果是通过前端打包(npm run build:stage)过去部署到他们后台本地上的,那么他们访问的接口地址是:ip:端口号/stage-api/接口名称,而前端修改 target 后在本地访问后台接口的地址是:ip:端口号/dev-api/接口名称,仍然会造成接口 404。所以我们最好是将 .env.development, .env.production, .env.staging 这 3 个文件的 VUE_APP_BASE_API 的值统一改成 相同的值,我这里改成了“warehouse-qr”。

2.2.2 页面报“系统接口404”错误

  1. 页面显示空白,且报404:
    1. 如上,检查请求头是否有缓存,若有缓存,清除缓存并刷新。
  2. 页面显示,验证码空白,且报404:
    1. 此时还报404错误,确认一下接口地址是否正确。
    2. 如果后台能访问,但是前端404,那么问题就出在前端这,看下图ip访问地址:已经确认后台地址“ip:端口号/warehouse-qr/captchaImage”能访问,而此时我们在 vue.config.js 中的配置信息为:,就算我们在 .env.development.js 中配置了proxy的值“warehouse-qr”,也只是代表我们在前端接口中调用“warehouse-qr”,路径重定向到了 "后台ip地址:端口号",因为 pathRewrite 后面的值为:“”空字符串(具体可参照 2.1)。因此 这里还要给 pathRewrite 值设置一下:

三、打包配置

3.1 打包之后静态资源404

        这个与 vue.config.js 中的 publicPath 静态资源访问路径有关。

        原代码中配置的是绝对路径,如果不是部署到服务器的根目录下,那么静态资源会报404,将publicPath 在生产环境下的值改为“./”再重新打包就好了。publicPath: process.env.NODE_ENV === "production" ? "./" : "/",

3.2 登录页登录成功之后 vue 版菜单点不开,报错:Error: Cannot find module ‘@/views/system/user/index’

若依vue版菜单点不开 Error Cannot find module ‘@viewssystemuserindex‘_过的很好谢谢的博客-CSDN博客

        在开发环境,登录没什么问题,到了生产环境,登录进不去首页,还报上述错误。在 /src/store/modules/permission.js 文件中查找“loadview”:

        将上面 import 实现生产环境的路由懒加载改为“return (resolve) => require([`@/views/${view}`], resolve)”,如下图:

3.3 登录之后跳转页面显示 404

账户登录之后跳转页面直接显示404,为什么? · Issue #I3RMTB · 若依/RuoYi-Cloud - Gitee.com

        将路由模式改成“hash”模式,如果不想要hash模式,history模式后台要进行配置,具体查看以上链接。

猜你喜欢

转载自blog.csdn.net/Start2019/article/details/126299661