electron打包桌面版.exe之vue项目踩坑(vue3+electron 解决打包后首页打开空白,打包后路由不跳转及请求不到后端数据等问题)

vue项目https://www.qingplus.cn/components-web/index打包桌面版问题集合

一、静态资源加载问题
npm 复制代码
npm run electron_dev

桌面版运行后页面空白,内容未加载。

填坑:

打包配置要用相对路径

vite.config.ts文件中的base要改成'./',之前加了项目名

二、接口请求报错

后端接口请求失败

填坑

axios的baseUR需要配置请求路径(http://www.baidu.com)

javascript 复制代码
axios.defaults.baseURL = 'http://www.baidu.com' 
三、路由跳转失败

登录成功后使用router.push('/index')跳转到首页,未跳转成功

网上都是路由模式要用Hash模式,但我项目本来就Hash,经过不断排查,是setCookie()方法出了问题,因为是electron不支持这种方式

javascript 复制代码
 /**
     * 设置token
     */
    setToken(token: string) {
      this.oauthToken = token
      setCookie('oauthToken', token)
    }

    /**
 * 设置Cookie
 * @param {string} key
 * @param {*} val
 * @param {*} path
 */
 export function setCookie(key: string, val: string, path?: string) {
  if (!path) path = "/";
  document.cookie = key + "=" + val + "; expires=Session; path=" + path;  //设置cookie
}
填坑

用sessionStorage.setItem代替将setCookie(),sessionStorage.getItem代替getCookie()

相关推荐
记得早睡~1 小时前
leetcode51-N皇后
javascript·算法·leetcode·typescript
小小鸭程序员3 小时前
Vue组件化开发深度解析:Element UI与Ant Design Vue对比实践
java·vue.js·spring·ui·elementui
拉不动的猪3 小时前
vue自定义指令的几个注意点
前端·javascript·vue.js
yanyu-yaya3 小时前
react redux的学习,单个reducer
前端·javascript·react.js
陌路物是人非3 小时前
SpringBoot + Netty + Vue + WebSocket实现在线聊天
vue.js·spring boot·websocket·netty
拉不动的猪3 小时前
uniapp与React Native/vue 的简单对比
前端·vue.js·面试
加瓦点灯3 小时前
观察者模式:解耦对象间的依赖关系
开发语言·javascript·观察者模式
z_mazin4 小时前
Chrome开发者工具实战:调试三剑客
前端·javascript·chrome·网络爬虫
sen_shan5 小时前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单
旧识君6 小时前
移动端1px终极解决方案:Sass混合宏工程化实践
开发语言·前端·javascript·前端框架·less·sass·scss