文章目录
- 目录
- V4.0与之前版本的差异
- 修改服务端地址
- 服务端地址前被附加
http://localhost:9527/
- 启动工程测试时会打开2个页面
- 同时访问服务端和Mock
- 使用同一个request
- Mock地址为
VUE_APP_BASE_API - 服务端地址为
VUE_APP_BASE_API
- 使用2个request
- 自定义token
- 接收token并保存
- 将token附加到请求的header
- 动态路由
- 思路
- 404拦截
- webpackEmptyContext：动态加载失败
- 命令与配置文件
- 打包发布资源路径不对
在vue-element-admin V4.0之前的版本，根目录下存在2个文件夹：
- build文件夹包含构建相关的build及webpack等文件。
- config文件夹包含各种环境下的配置。
- build文件夹保留，但其下只剩了一个index.js文件。
- config文件夹去掉。
- 根目录下多了2种重要文件：.env.xxx，vue.config.js。
其中，.env.xxx为开发/生产环境的配置文件，vue.config.js为整个工程的全局配置文件。
要修改服务端地址，打开.env.development，这是开发环境的配置文件。其下有个配置是：
将该处地址修改为正确的服务端地址：
即可。
有时，按上述更改设置后请求，会发现在路径前附加了，类似：
曾经一度排查了很久，将Mock屏蔽也不起作用。有两种解决方法：
- 修改vue.config.js中的devServer，配置proxy指向服务端。
- 从github上重新下载最新的vue-element-admin。
- 打开vue.config.js，其中默认为，更改为。
- 打开package.json，其中默认为，将其修改为：。
- 使用同一个request。然后根据具体情况设置拦截器来拦截服务端接口或者Mock接口。
- 使用2个request，访问服务端的request和访问Mock的request互不干涉。
使用同一个request有2种方式：
- Mock地址为，拦截服务端接口并将其更改为服务端地址。
- 服务端地址为，拦截Mock接口并将其更改为Mock地址。
Mock地址为
- 更改前：
- 更改后：
服务端地址为
这样，2个request互不影响，问题解决。
打开 /src/store/modules/user.js，其中下的为调用用户自定义登录接口并进行回调处理。
在这里获取到的response即为服务端返回的数据。从中即可获取token值。
在下方会调用和来将这个token值保存起来。
打开 /src/utils/request.js，有这样一段代码：
vue-element-admin的动态路由流程为：
- 用户输入用户名和密码后点击登录，调用接口获取token并缓存。
其代码位于 /store/user.js ：
- 调用接口获取用户信息并缓存，其中包含roles属性。
其代码位于 /store/user.js ：
- 根据roles属性对本地所有的路由进行过滤，只保留允许roles查看的路由，挂到中。
其代码位于 /src/permission.js ：
可以看到相关逻辑位于块中。
根据此流程，可知要满足需求，需要更改其中的2和3两步。设登录的账户都有个roleId属性，可通过请求服务端相关接口并传入roleId来获取一个路由数据数组：
- 用户输入用户名和密码后点击登录，调用接口获取token并缓存。
- 调用接口获取用户信息并缓存，其中包含roleId属性。
- 调用服务端接口并传入roleId，来获取路由数据数组。
- 根据路由数据数组来动态生成路由并挂到上。
其中第3和第4步的逻辑应在 /src/permission.js 的中实现。提供一段参考代码：
这里在 /src/modules/ 文件夹下自定义了myRoute.js负责路由数据的请求及获取到数据后路由结构的生成，并将设置到 /store/getter.js 和 /store/index.js 中。
需要注意的一点是，需要将 /src/router/index.js 中的最后两个404路由单独导出，加载动态路由的时候，作为动态路由的一部分独立挂到动态路由的最后。
也就是说，对于动态路由而言，其构成为：
静态路由部分 + 动态路由部分 + 2个404路由
路由的结构官方文档有详细说明，一个简单的路由结构为：
vue-router.esm.js:1921 Error: Cannot find module ‘@/views/icons/index’ at webpackEmptyContext
这是webpack导致的，不能在中使用变量。解决方法为将更改为。即：
如上，即可解决。
新版本下的配置文件直接放在了根目录下，默认有3个：
- .env.development
- .env.prodution
- .env.staging
而package.json中主要的运行和打包命令也有3个：
- “dev”: “vue-cli-service serve”
- “build:prod”: “vue-cli-service build”
- “build:stage”: “vue-cli-service build –mode staging”
.env. + 名称
这样可以针对不同的环境创建多个配置文件，然后运行对应的命令即可使用对应的配置来运行/打包，而不需要每次都修改配置文件。
将vue.config.js的publicPath属性更改为即可。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/137391.html