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增加配置:

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 项目创建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue mounted()函数中无法定义初始化样式的原因分析

    vue mounted()函数中无法定义初始化样式的原因分析

    这篇文章主要介绍了vue mounted()函数中无法定义初始化样式的原因分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • element前端实现压缩图片的功能

    element前端实现压缩图片的功能

    本文主要介绍了element前端实现压缩图片的功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • 浅谈vue+webpack项目调试方法步骤

    浅谈vue+webpack项目调试方法步骤

    本篇文章主要介绍了浅谈vue+webpack项目调试方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • echarts3如何清空上一次加载的series数据

    echarts3如何清空上一次加载的series数据

    这篇文章主要介绍了echarts3如何清空上一次加载的series数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue 中生命周期定义及流程

    Vue 中生命周期定义及流程

    这篇文章主要介绍了Vue中生命周期定义及流程,生命周期又被称为生命周期回调函数、生命周期函数或生命周期钩子,下文关于其更多有趣的介绍需要的小伙伴可以参考一下文章详细内容
    2022-05-05
  • 如何使用Vue mapState快捷获取Vuex state多个值

    如何使用Vue mapState快捷获取Vuex state多个值

    这篇文章主要为大家介绍了如何使用Vue mapState快捷获取Vuex state多个值实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • Vue3实现跨页面传值的几种常见方法

    Vue3实现跨页面传值的几种常见方法

    在Vue 3中,跨页面传值可以通过多种方式实现,具体选择哪种方法取决于应用的具体需求和页面间的关系,本文列举了几种常见的跨页面传值方法,感兴趣的同学跟着小编来看看吧
    2024-04-04
  • Vue 重置组件到初始状态的方法示例

    Vue 重置组件到初始状态的方法示例

    这篇文章主要介绍了Vue 重置组件到初始状态的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • 如何解决vue-json-editor无法输入中文、重影问题

    如何解决vue-json-editor无法输入中文、重影问题

    文章介绍了如何解决vue-json-editor组件无法输入中文和重影的问题,通过修改源码并使用vue-json-edit-fix-cn组件来 fix 这两个问题,同时,文章还提供了如何移除旧的依赖包并安装新的依赖包的步骤
    2025-01-01
  • vue计算属性computed方法内传参方式

    vue计算属性computed方法内传参方式

    这篇文章主要介绍了vue计算属性computed方法内传参方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10

最新评论