# 前端问题
# 登录前登录后弹出安装插件框
登录前后都弹出安装插件的弹窗,如需解决请:
使用Chrome v93版本浏览器。使用详见浏览器使用说明
按照弹窗提示下载安装插件,并运行。
# 项目运行在node17+版本环境里报错的问题
- 报错如下图:
- 解决办法(以下三个办法任选其一即可):
(1) 打开终端,输入以下内容。(一次性的方法,关闭之后就没用了,下次打开还的来一遍。)
mac:
export NODE_OPTIONS=--openssl-legacy-provider
windows:
set NODE_OPTIONS=--openssl-legacy-provider
(2) 降低node版本(推荐):
安装个node版本管理工具(n或者nvm),将node版本降到17版本以下。
(3) 修改package.json文件
mac:
"scripts": { "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve", }
windows:
"scripts": { "serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve", },
# 前端控制台报WebSocket接口连接错误或前端关闭消息中心模块
解决办法:
1、确定是否使用消息中心模块。如果不使用,请在配置中关闭。在/public/environment.js
配置文件中设置VUE_APP_MSG_BELL = '0'
(1:开启,0:关闭)。
2、如果确定使用消息中心依然报错,请联系后端检查是否引入消息中心模块,及后端接口白名单中是否包含- /websocket/**
# 页面隐藏菜单
当其他项目嵌基础平台一个菜单页面,不需要展示菜单时,可以在url上增加showMenu=false
达到隐藏菜单的目的
# 在iframe中打开tab页签
在iframe中向父页面window.parent
或顶级页面window.top
使用postMessage
方法发送数据。
方法及数据格式如下方代码所示:
const obj = {
// 字段名必须为type, 格式为string
type: 'openTab',
// 字段名必须为data, 格式为string或object
// 如果为string,则表示要跳转路由的path
// 如果为object,则表示要跳转的路由对象,可传入query等参数
data: {
// path为在菜单管理新增时,输入的编码
// 如部门管理:'/department'; 菜单管理:'/base-sys-resources'
path: 'xxx',
// 以下参数可不填,根据需求选填
name: 'xxx',
query: { xxx: 'xxx', xxx: 'xxx' },
params: { xxx: 'xxx', xxx: 'xxx' },
}
}
window.parent.postMessage(obj, '*')
# 自定义403或404错误页面内容
当前项目中默认的403或404错误页面如果需要自定义,请到public/static/error-page
文件夹中修改,页面目录如下:
页面中的内容为纯html+css+js,如果需要从外部传入参数,可以通过浏览器缓存获取数据,404页面中展示的是上个页面的路由地址,页面展示效果如下:
# 兼容医为49版本浏览器
医为49版本浏览器基于chrome49版本,该版本不支持async/await,对象展开符等es6语法,所以如果使用了这些语法,在不进行任何处理的情况下,就会出现兼容性问题。
解决办法:
- 项目本身的代码处理: 在package.json的browserslist中添加”Chrome > 40”,该配置的目的是告诉webpack在代码编译的过程中在进行浏览器兼容处理时需要兼容的程度(例如babel,autoprefixer中都会用到浏览器版本信息)。
- 第三方库的代码处理: 正常情况下,代码编译过程中仅会处理项目本身的代码,不会处理node_modules目录中(第三方库的代码一般都在该目录中)的代码,所以如果第三方库的代码本身使用了async/await等不支持的语法而不处理就会出现兼容问题。此时需要在vue.config.js中加上配置:transpileDependencies:[‘xx-third-lib’],这样xx-third-lib就会在编译过程中一并处理,从而解决由第三方库引起的兼容问题。
# 前端控制台报lodop接口连接错误
解决办法:
1、确定是否使用lodop打印。如果不使用,请在配置中关闭。在.env
配置文件中设置VUE_APP_USE_LODOP = false
(true:开启,false:关闭)。
2、如果确定使用lodop打印依然报错,请联系后端检查是否引入Clodopfuncs.js