用electron打包vue项目中的报错问题及解决

 更新时间:2022年05月31日 09:53:31   作者:婷叽  
这篇文章主要介绍了用electron打包vue项目中的报错问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

如何用electron打包vue项目,请参见我的另一篇文章:如何用electron打包vue项目为桌面应用文件exe

这里,也要提到实际项目中的问题,可能有同志的目录结构和内容有些许差别,就我刚刚遇到的问题来说,常见的问题的有几个问题,以及解决办法如下:

1.  首先一定要cd到项目的根目录

(我这里是app)里面才能运行项目,再重新npm run build,不然的话很有可能出现 “ 系统找不到路径的问题 ”,成功的话会出现下面绿色的一串提示。

2.  接下来运行

“ npm run electron_build ”又出现如下报错

'electron' 不是内部或外部命令,也不是可运行的程序
或批处理文件。
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-paper-dashboard-pro@1.1.0 electron_dev: `electron build/electron.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-paper-dashboard-pro@1.1.0 electron_dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
 
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\milyyy\AppData\Roaming\npm-cache\_logs\2018-11-27T07_32_32_788Z-debug.log

或者 你运行了“ npm run build ” 也出现了如下报错

D:\project\app>npm run build
npm ERR! file D:\project\app\package.json
npm ERR! code EJSONPARSE
npm ERR! JSON.parse Failed to parse json
npm ERR! JSON.parse Unexpected token / in JSON at position 392 while parsing near '...ev-server.js",
npm ERR! JSON.parse     // "build": "cross-e...'
npm ERR! JSON.parse Failed to parse package.json data.
npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.
 
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\milyyy\AppData\Roaming\npm-cache\_logs\2018-11-27T07_33_47_083Z-debug.log

出现以上问题,很有可能说明了一个问题,那么现在,我们再重新运行一下(再次强调在根目录中)

1
2
npm install electron --save-dev
npm install electron-packager --save-dev

这个时候如果再报错,检查一下我们app下的package.json文件,里面的内容如果是这样:(先别着急)

1
2
3
4
5
6
7
"scripts": {
  "dev": "node build/dev-server.js",
  "start": "cross-env ENABLE_ESLINT=true node build/dev-server.js",
  "build": "cross-env ENABLE_ESLINT=true node build/build.js",
  "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
  "test": "npm run unit"
},

很多人的script都进行过配置,那么就跟着我做如下修改吧:

1
2
3
4
5
6
7
8
9
10
"scripts": {
   "dev": "cross-env ENABLE_ESLINT=true node build/dev-server.js",
   "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
   "unit:watch": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --watch",
   "e2e": "node test/e2e/runner.js",
   "test": "npm run unit && npm run e2e",
   "build": "node build/build.js",        // *修改的*(很重要)
   "electron_dev": "electron build/electron.js",    // *修改的*
   "electron_build": "electron-packager ./dist/ --platform=win32 --arch=ia32  --icon=./src/assets/yizhu.ico  --overwrite"    // *修改的*
 },

最后,再次运行,

1
npm run electron_build

成功!

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

蓄力AI

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

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

原文链接:https://blog.csdn.net/qq_40128375/article/details/84568247

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

相关文章

  • vue大屏自适应的实现方法(cv就能用)

    vue大屏自适应的实现方法(cv就能用)

    最近在用VUE写大屏页面,遇到屏幕自适应问题,下面这篇文章主要给大家介绍了关于vue大屏自适应的实现方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • Vue中自定义日志打印插件问题

    Vue中自定义日志打印插件问题

    这篇文章主要介绍了Vue中自定义日志打印插件问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 教你用vue实现一个有趣的围绕圆弧动画效果

    教你用vue实现一个有趣的围绕圆弧动画效果

    最近做的两个项目都是关于vue的,做完整理一下,这篇文章主要给大家介绍了关于如何用vue实现一个有趣的围绕圆弧动画效果的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • vue3+vite多项目多模块打包(基于vite-plugin-html插件)

    vue3+vite多项目多模块打包(基于vite-plugin-html插件)

    这篇文章主要给大家介绍了关于vue3+vite基于vite-plugin-html插件实现多项目多模块打包的相关资料,现在很多小伙伴都已经使用Vite+Vue3开发项目了,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • vue移动端的左右滑动事件详解

    vue移动端的左右滑动事件详解

    这篇文章主要为大家详细介绍了vue移动端的左右滑动事件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • vue-cli3设置代理无效的解决

    vue-cli3设置代理无效的解决

    这篇文章主要介绍了vue-cli3设置代理无效的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vue 组件简介

    vue 组件简介

    这篇文章主要介绍了vue组件的相关资料,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • vue中scss语法的使用你了解吗

    vue中scss语法的使用你了解吗

    这篇文章主要为大家详细介绍了vue中scss语法的使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • vue中定义的data为什么是函数

    vue中定义的data为什么是函数

    这篇文章主要介绍了vue中定义的data为什么是函数,vue中已经帮我们控制台输出警告,并且不会让组件中的data合并到options中去,那么,很友好的处理了开发者的强行将data写成对象的可能性,需要的朋友可以参考下
    2022-09-09
  • Vue实现路由跳转的3种方式超详细分解

    Vue实现路由跳转的3种方式超详细分解

    Vue.js是一款流行的前端JavaScript框架,它提供了多种方式来实现路由跳转,下面这篇文章主要给大家介绍了关于Vue实现路由跳转的3种方式,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12

最新评论