Vue-Vben-Admin 常见问题整理
1.菜单必须和路由匹配才会显示在界面上,所以得确保菜单和对应的路由存在即可显示.
2.需要在开发运营系统-应用管理/应用资源授权 授权该菜单
tab 页切换后页面空白
这是由于开启了路由切换动画,且对应的页面组件存在多个根节点导致的,在页面最外层添加即可
错误示例
text h1
text h2
正确示例
text h1
text h2
提示
如果想使用多个根标签,可以禁用路由切换动画
template 下面的根注释节点也算一个节点
环境问题
如果出现依赖安装报错,启动报错等。先检查电脑环境有没有安装齐全。
Node 版本必须大于
12.0.0
不支持13
, 推荐 14 版本。Git
Yarn 最新版
依赖安装问题
如果依赖安装不了或者启动报错可以先尝试 删除
yarn.lock
和node_modules
,然后重新运行yarn install
如果依赖安装不了或者报错,可以尝试切换手机热点来进行依赖安装。
如果还是不行,可以自行配置国内镜像安装。
也可以在项目根目录创建
.npmrc
文件,内容如下
# .npmrc
registry = https://registry.npm.taobao.org
然后重新执行yarn run reinstall
等待安装完成即可
接口请求问题
proxy 代理不成功,没有代理到实际地址?
代理只是服务请求代理,这个地址是不会变的。 原理可以简单的理解为,在本地启了一个服务,你先请求了本地的服务,本地的服务转发了你的请求到实际服务器。所以你在浏览器上看到的请求地址还是 http://localhost:8000/xxx
。以服务端是否收到请求为准
添加了接口权限,还是提示未授权
一般是没有选择是api 接口写的请求方式写错了,有些是PUT 或者 delete 写错了 post
深度选择器
有时我们可能想明确地制定一个针对子组件的规则。
如果你希望 scoped
样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>>
操作符。有些像 Sass 之类的预处理器无法正确解析 >>>
。这种情况下你可以使用 /deep/
或 ::v-deep
操作符取而代之——两者都是 >>>
的别名,同样可以正常工作。
详情可以查看 RFC。
使用 scoped 后,父组件的样式将不会渗透到子组件中,所以可以使用以下方式解决:
/* deep selectors */
::v-deep(.foo) {
}
/* shorthand */
:deep(.foo) {
}
/* targeting slot content */
::v-slotted(.foo) {
}
/* shorthand */
:slotted(.foo) {
}
/* one-off global rule */
::v-global(.foo) {
}
/* shorthand */
:global(.foo) {
}
报错 ReferenceError: Cannot Access 'pageWrapper' before initialization
https://github.com/jeecgboot/jeecgboot-vue3/issues/229