文章目录
- 目录
- 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，这是开发环境的配置文件。其下有个配置是：
将该处地址修改为正确的服务端地址：
即可。
有时，按上述更改设置后请求，会发现在路径前附加了，类似：
http://localhost:9527/192.168.15.98:9098/template/test
曾经一度排查了很久，将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地址为
默认地，。这个不需要更改。
打开vue.config.js，修改其devServer，添加proxy属性：
- 更改前：
- 更改后：
但目标地址为：。故而需要设置将替换为空字符串。
这样做可以实现。然而，这样意味着服务端每次开放接口都需要修改此代理来适配新的接口。随着服务端开放的接口越来越多，这个设置也会变得越来越复杂。可以创建一个单独的配置文件来存放这些API。
当然可以为所有的服务端接口添加一个统一的前缀，这样该处设置就不需要反复修改。但这样就对服务端的接口名有要求，考虑到实际开发，并不推荐这样做。
服务端地址为
Mock数据都是存放在本地的，因此所有Mock接口是本地定义的，不需要服务端干涉。故而Mock接口可以添加统一前缀。当服务端对应接口开放，删掉相应Mock接口并修改对应访问即可。
于是将服务端地址设为，然后拦截Mock的接口。还要修改中的，其中用到的url更改为Mock的地址。
理论来说与前一种方式相同。但实际会遇到跨域的问题。
首先明确本机是localhost。
前一种方式访问的地址是本地，访问服务端接口时，代理将对localhost的访问转为对服务端的访问，也就是说是从localhost访问localhost，然后代理转给服务端，这样是没问题的。
然而这一种方式的访问的地址是服务端地址，这就意味着访问Mock端口时，需要代理将对服务端的访问转为对本地的访问，即从localhost访问服务端，然后代理将服务端地址转为localhost。这样就跨域了。
不推荐使用此方式。
请求都是由负责。因此复制一个，改名为，将其中时所调用的地址更改为Mock的地址。
然后找到下所有需要访问Mock的文件，将其中：
更改为：
然后还要修改中的，其中用到的url更改为Mock的地址。
这样，2个request互不影响，问题解决。
打开 /src/store/modules/user.js，其中下的为调用用户自定义登录接口并进行回调处理。
在这里获取到的response即为服务端返回的数据。从中即可获取token值。
在下方会调用和来将这个token值保存起来。
打开 /src/utils/request.js，有这样一段代码：
其中这行代码的作用就是取出token值并附加到header的属性中。若要更改属性名，或者在token值前附加特定的字符串，可以在这里进行修改。
另外，若需要对特定的返回code做拦截，也是在该文件中进行。
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. + 名称
引用时，在命令后加：即可。
特殊地，若运行的是命令且没有加，则调用 .env.development ；若运行的是命令且没有加，则调用 .env.prodution 。
即：
等同于等同于
这样可以针对不同的环境创建多个配置文件，然后运行对应的命令即可使用对应的配置来运行/打包，而不需要每次都修改配置文件。
将vue.config.js的publicPath属性更改为即可。
到此这篇swagger无法访问（swagger ui打不开）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/rfx/24077.html