踩坑手册（electron-vue篇）

electron-vue-admin的框架是继vue-admin框架之后十分好用的一款基于electron-vue框架下的桌面端软件管理框架，为广大前端程序员们快速写出漂亮的桌面端软件，强行在桌面端领域分一杯羹提供了强有力的工具。本帖不间断更新，用于间歇性记录本人在开发过程中遇到的各种坑。

1.关于electron-vue-admin框架中element-ui 的el-table无法显示、页面卡死的问题。

el-table在electron-vue-admin中会出现渲染不出来的情况吗，一开始以为是我的代码有问题，我就将element-ui的示例代码帖进去，发现示例代码也渲染不出来。后来我又认为是我的vue版本和element-ui版本有问题，琢磨半天也没发现问题。最终在GitHub的electron-vue的issue中发现了electron-vue的作者给出的解决办法：

@imRainChen

Okay, I am able to reproduce this issue now. It seems element-ui falls into that category of modules that need to be white-listed. If you go into .electron-vue/webpack.renderer.config.js, around line 21, you can add element-ui to the whiteListedModules list. After making that change, tooltips will work as expected.

意思就是将 element-ui添加到white-listed中去，具体位置在.electron-vue/webpack.renderer.config.js这个文件中的22行，修改后是这样的：

2.关于electron-vue-admin框架中添加路由时路由不显示的问题。

原生的electron-vue-admin框架中没有权限管理的功能，即根据用户权限自动渲染左侧菜单栏。在手动添加这个功能的时候，发现左侧的路由怎么都实现不了。

我添加权限管理的方式就是就是用户登录后，通过api接口从服务器拉取用户信息，获得用户角色（roles），拿到后动态生成路由，再通过addRoutes方法添加到router中去，再动态渲染出来，但是无论我怎么弄都没有成功。我的源码如下：

try {
  store.dispatch('GetInfo').then(res => {
  const roles = res.roles
  store.dispatch('generateRoutes', roles).then(res => {
  router.addRoutes(store.getters.addRouters)
  next({ ...to, replace: true })
  })
})
} catch (error) {
  await store.dispatch('FedLogOut')
  Message.error(error || 'Has Error')
  next(`/login?redirect=${to.path}`)
  NProgress.done()
}

首先要说明的是：next({..to, replace:true})这句话非常重要，如果没有这句话新添加的路由时不会生效的。这句话的意思就是执行addRoutes方法时，路由已经渲染了，这时候添加也不能更新渲染，所以要用这句再重新渲染一下。

然后说一下我的问题就是上述代码执行后，居然不出现动态路由，后来才诡异的发现要加上这么一句：  router.options.routes = store.getters.routes，添加后代码：

try {
  store.dispatch('GetInfo').then(res => {
  const roles = res.roles
  store.dispatch('generateRoutes', roles).then(res => {
  router.options.routes = store.getters.routes
  router.addRoutes(store.getters.addRouters)
  next({ ...to, replace: true })
  })
})
} catch (error) {
  await store.dispatch('FedLogOut')
  Message.error(error || 'Has Error')
  next(`/login?redirect=${to.path}`)
  NProgress.done()
}

然后就好了。说实话，没明白啥意思，反正就是好了。秉承一句理念：无论程序以何种方式运行起来，只要成功运行了就不要再碰他。

3.关于渲染进程中被多次on(监听)一个时间的问题

在开发过程中，我遇到了一个问题，就是在渲染进程中需要打开一个”打开文件“对话框，我从渲染进程向主进程发消息，主进程打开对话框，选择好文件后，主进程将打开文件的路径信息通过事件传递给渲染进程。

我渲染进程发消息通知主线程的代码如下：

methods: {
    import_data() {
      const ipc = require('electron').ipcRenderer
      ipc.send('open_crypto_dialog')
    }
}

主进程打开对话框后，选择好文件再发消息的代码如下：

ipc.on('open_crypto_dialog', function (event, contents) {
  const dialog = require('electron').dialog
  dialog.showOpenDialog({
    title: "请选择需要导入的文件",
    buttonLabel: "打开",
    filters: [
        { name: '专用加密文件', extensions: ['CRYPTO'] },
      ]
    }, (response) => {
      event.sender.send('open_crypto_dialog_render', response)
    })
  })

我在渲染进程的生命周期created函数中，监听了open_crypto_dialog_render事件，监听的时间如下：

ipc.on('open_crypto_dialog_render', (event, filename) => {
      console.log('open_crypto_dialog_render')
})

然后就发现一个问题，每次切换到其他页面再切换回来的时候，就会将open_crypto_dialog_render事件再绑定一次，出发该事件会打印两次open_crypto_dialog_render。

经过研究，解决的办法就是在生命周期destroyed函数中移除open_crypto_dialog_render的监听器。

  destroyed() {
    const ipc = require('electron').ipcRenderer
    ipc.removeAllListeners('open_crypto_dialog_render')
  },

4. 关于在electron-vue中使用elementUI表单验证的问题

事情是这样的。

我有个表单，需要验证一个多选框是否被多选了。然后我的表单rules是这样的：

rules: {
        pickDatetimeRule: [{ required: true, message: '请输入时间段', trigger: 'blur' }],
        checkedDocumentStatusRule: [{ required: true, message: '请输入时间段', trigger: 'blur' }],
        documentTypeRule: [{ required: true, message: '请选择文书类型', trigger: 'blur' }]
      }

我的表单的model是这样的：

export_to_excel_form_data: {
  checkedDocumentStatus: [],
  documentType: [],
  useCompanyValue: [],
  datePickerValue: []
},

我正确在el-form中设置了rules，也在el-form-item上正确的设置了rules中对应的prop。

但是在实际使用的过程中，这个验证器出现了无论我有没有选择都会提示报错。

一番尝试之后，终于找到了原因，就是：

model中的键名与rules中的键名要一样的。

同时还需要注意的是，使用表单验证必须要设置el-form的model。