用electron打包vue項(xiàng)目中的報(bào)錯(cuò)問(wèn)題及解決
如何用electron打包vue項(xiàng)目,請(qǐng)參見(jiàn)我的另一篇文章:如何用electron打包vue項(xiàng)目為桌面應(yīng)用文件exe
這里,也要提到實(shí)際項(xiàng)目中的問(wèn)題,可能有同志的目錄結(jié)構(gòu)和內(nèi)容有些許差別,就我剛剛遇到的問(wèn)題來(lái)說(shuō),常見(jiàn)的問(wèn)題的有幾個(gè)問(wèn)題,以及解決辦法如下:
1. 首先一定要cd到項(xiàng)目的根目錄
(我這里是app)里面才能運(yùn)行項(xiàng)目,再重新npm run build,不然的話很有可能出現(xiàn) “ 系統(tǒng)找不到路徑的問(wèn)題 ”,成功的話會(huì)出現(xiàn)下面綠色的一串提示。

2. 接下來(lái)運(yùn)行
“ npm run electron_build ”又出現(xiàn)如下報(bào)錯(cuò)
'electron' 不是內(nèi)部或外部命令,也不是可運(yùn)行的程序
或批處理文件。
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
或者 你運(yùn)行了“ npm run build ” 也出現(xiàn)了如下報(bào)錯(cuò),
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
出現(xiàn)以上問(wèn)題,很有可能說(shuō)明了一個(gè)問(wèn)題,那么現(xiàn)在,我們?cè)僦匦逻\(yùn)行一下(再次強(qiáng)調(diào)在根目錄中)
npm install electron --save-dev npm install electron-packager --save-dev
這個(gè)時(shí)候如果再報(bào)錯(cuò),檢查一下我們app下的package.json文件,里面的內(nèi)容如果是這樣:(先別著急)
"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都進(jìn)行過(guò)配置,那么就跟著我做如下修改吧:
"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" // *修改的*
},最后,再次運(yùn)行,
npm run electron_build

成功!
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vue配置electron使用electron-builder進(jìn)行打包的操作方法
- vue3使用Electron打包成exe的方法與打包報(bào)錯(cuò)解決
- 使用electron打包Vue前端項(xiàng)目的詳細(xì)流程
- 如何使用electron將vue項(xiàng)目打包成.exe文件(保姆級(jí)教程)
- 解決electron打包vue-element-admin項(xiàng)目頁(yè)面無(wú)法跳轉(zhuǎn)的問(wèn)題小結(jié)
- vue項(xiàng)目使用electron進(jìn)行打包操作的全過(guò)程
- 手把手教你使用electron將vue項(xiàng)目打包成exe
- 關(guān)于electron-vue打包后運(yùn)行白屏的解決方案
- vue項(xiàng)目打包成桌面快捷方式(electron)的方法
- vue 項(xiàng)目集成 electron 和 electron 打包及環(huán)境配置方法
相關(guān)文章
Vue利用Mixin輕松實(shí)現(xiàn)代碼復(fù)用
Mixin,中文翻譯為"混入",在Vue中是一種非常有用的功能,可以解決許多開發(fā)中的常見(jiàn)問(wèn)題,下面就讓我們一起深入了解一下Mixin在Vue中解決了哪些問(wèn)題吧2023-06-06
詳解Vue如何進(jìn)行分布式事務(wù)管理以及解決方案
在分布式系統(tǒng)中,事務(wù)管理是一個(gè)非常重要的問(wèn)題,所以本文將介紹一下Vue中如何進(jìn)行分布式事務(wù)管理以及分布式事務(wù)解決方案,希望對(duì)大家有所幫助2023-06-06
Vue引入highCharts實(shí)現(xiàn)數(shù)據(jù)可視化
這篇文章主要為大家詳細(xì)介紹了Vue引入highCharts實(shí)現(xiàn)數(shù)據(jù)可視化,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03
Vue3中Element Plus Table(表格)點(diǎn)擊獲取對(duì)應(yīng)id方式
這篇文章主要介紹了Vue3中Element Plus Table(表格)點(diǎn)擊獲取對(duì)應(yīng)id方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue實(shí)現(xiàn)輸入框只允許輸入數(shù)字
在vue項(xiàng)目中,輸入框只允許輸入數(shù)字,現(xiàn)將自己使用的一種方法記錄,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2023-11-11
Mint UI組件庫(kù)CheckList使用及踩坑總結(jié)
這篇文章主要介紹了Mint UI組件庫(kù)CheckList使用及踩坑總結(jié),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12

