踩坑手册（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的作者给出的解决办法：

意思就是将 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()
}

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