electron打包vue-element-admin无法跳转问题总结

Vue-Router配置与Electron环境下的Cookie替代方案

最新推荐文章于 2025-06-11 10:21:03 发布

原创最新推荐文章于 2025-06-11 10:21:03 发布 · 3.2k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #electron #javascript

本文介绍了在Vue项目中如何配置Vue-Router使用hash模式，并解决了在Electron环境下js-cookie库无法使用的问题。当遇到js-cookie在Electron下失效导致登录状态无法维护时，提出了使用localStorage作为替代方案来存储和读取token。同时，调整了build模块的assetsPublicPath以确保在生产环境中能正确读取token。

1. Vue-Router模式

export default new Router({
 mode: 'hash', //这里history修改为hash
 scrollBehavior: () => ({y: 0}),
  routes: constantRouterMap,
})

2.\src\utils\auth.js下使用Cookies

参考Cookies的博客如下：

问题原因：
大部分vue 前段项目会使用 js-cookie 这个库来操作浏览器的cookie
然而这个库在electron下会无法使用（最坑的是还没报错）
从而导致登录成功以后写cookie 读cookie的操作全部失败
自然而然登录无法跳转了
解决方案：
不使用该库使用localStorage就行了吗

const TokenKey = 'Admin-Token'

// if (process.env.NODE_ENV === 'production') {
//   store = new Store()
// }

export function getToken() {
  return localStorage.getItem(TokenKey)
}

export function setToken(token) {
  return localStorage.setItem(TokenKey, token)
}

export function removeToken() {
  // if (process.env.NODE_ENV === 'production') {
  //   return store.delete(TokenKey)
  // }
  return localStorage.removeItem(TokenKey)
}

3.修改config下面的index.js中bulid模块导出的路径

 build: {
    //省略...
    assetsPublicPath: './',  //修改此处
    productionSourceMap: true,//设置为true，这里必须设置，否则token读不到还是无法跳转的
    //省略...
}