# 前端问题

# 登录前登录后弹出安装插件框

安装插件

登录前后都弹出安装插件的弹窗，如需解决请：

使用 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文件夹中修改，页面目录如下:

error-page

页面中的内容为纯 html+css+js，如果需要从外部传入参数，可以通过浏览器缓存获取数据，404 页面中展示的是上个页面的路由地址，页面展示效果如下:

error-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

# 前端项目带有二级路径案例-1

报错信息:

前端构建后的代码所在目录:

nginx 配置:

解决办法：
如图所示,地址栏里不是根路径,而是有一个二级路径 imedicalpis/base/,报错信息是提示各种静资源未找到.

再看一下代码存放目录及相关 nginx 配置,如图所示,通过/imedicalpis 可以定位到 xxxx\pis-mediway-boot\imedicalpis\webui,然后构建后的代码是放到这个目录下的 base 目录下了,所以可以得出结论:
路由跳转需要设置二级路径(地址栏里),而加载静态资源也是要设置二级路径的(nignx 配置结合代码发布位置).
所以构建时的命令如下:
npm run build —pb=“imedicalpis/base” —rb=“imedicalpis/base”
pb 参数:是配置静态资源的位置,也就是构建后 index.html 的所在位置(通过 imedicalpis 找到[pathTo]\webui 了,然后再加一个 base,而 index.html 就在这个 base 目录下面.
rb 参数: 就是地址栏里的二级路径,观察可知,其值就是 imedicalpis/base
注意: pb,rb 的值前后都不要加上/分隔符

# 前端项目带有二级路径案例-2

如图所示,这是另外一种 nignx 配置的写法,也可以参考一下

← 后端问题升级 →