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()

相关推荐
三巧13 分钟前
纯CSS吃豆人(JS仅控制进度)
javascript·css·html
软件技术NINI30 分钟前
html css js网页制作成品——HTML+CSS+js美甲店网页设计(5页)附源码
javascript·css·html
天天扭码42 分钟前
从数组到对象:JavaScript 遍历语法全解析(ES5 到 ES6 + 超详细指南)
前端·javascript·面试
拉不动的猪43 分钟前
前端开发中常见的数据结构优化问题
前端·javascript·面试
三原2 小时前
2025 乾坤(qiankun)和 Vue3 最佳实践(提供模版)
vue.js·架构·前端框架
天天扭码2 小时前
ES6 Symbol 超详细教程:为什么它是避免对象属性冲突的终极方案?
前端·javascript·面试
小矮马2 小时前
React-组件和props
前端·javascript·react.js
DC...2 小时前
vue滑块组件设计与实现
前端·javascript·vue.js
H5开发新纪元3 小时前
Vite 项目打包分析完整指南:从配置到优化
前端·vue.js
吃面必吃蒜4 小时前
从 Vue 到 React:React 合成事件
javascript·vue.js·react.js