vue-electron项目创建记录及问题小结解决方案

 更新时间:2024年03月01日 10:41:45   作者:wujf90  
这篇文章主要介绍了vue-electron项目创建记录及注意事项,本文给大家分享了运行项目报错的问题小结及多种解决方案,需要的朋友可以参考下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

vue-electron 项目创建记录及注意事项

1、使用vue ui或者命令行创建vue项目

2、添加electron插件

3、安装element-plus:

npm install --save element-plus

4、修改配置文件如下图:

vue.config.js增加配置:

1
2
3
4
5
6
7
pluginOptions:{
    electronOutput: {
      contextIsolation: false//上下文隔离
      nodeIntegration: true,   //nodejs支持
      enableRemoteModule: true  //remote
    }
  }

background.ts修改配置:

问题:1、运行项目会报错

解决方案:

更换ts-loader版本

npm uninstall ts-loader
npm install ts-loader@8.2.0

打包报错:

解决方案:

配置文件加上红框内容:set NODE_OPTIONS=--openssl-legacy-provider &&

打包时会自动下载一些第三方包,报错一般是下载url错误,url中版本号少了“v”,加上后手动下载,放到缓存目录:C:\Users\Administrator\AppData\Local\electron\Cache

解决方案二:

项目根目录下增加  .npmrc  文件

ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/

打包后,运行exe,界面空白,解决方案:

修改路由配置 router/index.ts:

到此这篇关于vue-electron 项目创建记录及注意事项的文章就介绍到这了,更多相关vue-electron 项目创建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/wujf90/article/details/136355277

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • Element布局组件el-row和el-col的使用

    Element布局组件el-row和el-col的使用

    这篇文章主要介绍了Element布局组件el-row和el-col的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue实现自定义多选按钮

    vue实现自定义多选按钮

    这篇文章主要为大家详细介绍了vue实现自定义多选按钮,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • Vue中Vue router和axios的封装使用教程

    Vue中Vue router和axios的封装使用教程

    当用户登录后,后台会返回一个token给前端,前端下次进入首页后,会先判断token是否过期,如果过期自动进入登录页面,本文给大家介绍Vue中Vue router和axios的封装使用教程,感兴趣的朋友一起看看吧
    2023-11-11
  • vue利用sync语法糖实现modal弹框的项目实践

    vue利用sync语法糖实现modal弹框的项目实践

    本文主要介绍了vue利用sync语法糖实现modal弹框的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • Vue+Element实现封装抽屉弹框

    Vue+Element实现封装抽屉弹框

    这篇文章主要为大家详细介绍了如何利用Vue和Element实现简单的抽屉弹框效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-06-06
  • element table数据量太大导致网页卡死崩溃的解决办法

    element table数据量太大导致网页卡死崩溃的解决办法

    当页面数据过多,前端渲染大量的DOM时,会造成页面卡死问题,下面这篇文章主要给大家介绍了关于element table数据量太大导致网页卡死崩溃的解决办法,需要的朋友可以参考下
    2023-02-02
  • 基于Vue中使用节流Lodash throttle详解

    基于Vue中使用节流Lodash throttle详解

    今天小编就为大家分享一篇基于Vue中使用节流Lodash throttle详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue中Mixin的正确用法详解

    Vue中Mixin的正确用法详解

    众所周知,vue 的 mixins 是个非常灵活,但又很容易带来混乱的 API,Mixins 本该是一种强大的重用代码的手段,但使用之后往往带来更多的混乱,代码变得不易维护,本文就详细介绍Vue Mixin的正确用法,需要的朋友可以参考下
    2023-06-06
  • 详解mpvue中使用vant时需要注意的onChange事件的坑

    详解mpvue中使用vant时需要注意的onChange事件的坑

    这篇文章主要介绍了详解mpvue中使用vant时需要注意的onChange事件的坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • Vue项目全局配置微信分享思路详解

    Vue项目全局配置微信分享思路详解

    这篇文章给大家介绍了vue项目全局配置微信分享思路讲解,使用vue作为框架,使用vux作为ui组件库,具体内容详情大家跟随脚本之家小编一起学习吧
    2018-05-05

最新评论