若依框架前端打包踩坑

官网：
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”错误
页面显示空白，且报404：

如上，检查请求头是否有缓存，若有缓存，清除缓存并刷新。
页面显示，验证码空白，且报404：

此时还报404错误，确认一下接口地址是否正确。
如果后台能访问，但是前端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模式后台要进行配置，具体查看以上链接。