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

2. 接下來運行
“ npm run electron_build ”又出現(xiàn)如下報錯
'electron' 不是內(nèi)部或外部命令,也不是可運行的程序
或批處理文件。
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 ” 也出現(xiàn)了如下報錯,
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)以上問題,很有可能說明了一個問題,那么現(xiàn)在,我們再重新運行一下(再次強調(diào)在根目錄中)
npm install electron --save-dev npm install electron-packager --save-dev
這個時候如果再報錯,檢查一下我們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都進行過配置,那么就跟著我做如下修改吧:
"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" // *修改的*
},最后,再次運行,
npm run electron_build

成功!
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
- vue配置electron使用electron-builder進行打包的操作方法
- vue3使用Electron打包成exe的方法與打包報錯解決
- 使用electron打包Vue前端項目的詳細流程
- 如何使用electron將vue項目打包成.exe文件(保姆級教程)
- 解決electron打包vue-element-admin項目頁面無法跳轉(zhuǎn)的問題小結(jié)
- vue項目使用electron進行打包操作的全過程
- 手把手教你使用electron將vue項目打包成exe
- 關(guān)于electron-vue打包后運行白屏的解決方案
- vue項目打包成桌面快捷方式(electron)的方法
- vue 項目集成 electron 和 electron 打包及環(huán)境配置方法
相關(guān)文章
Vue引入highCharts實現(xiàn)數(shù)據(jù)可視化
這篇文章主要為大家詳細介紹了Vue引入highCharts實現(xiàn)數(shù)據(jù)可視化,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03
Vue3中Element Plus Table(表格)點擊獲取對應id方式
這篇文章主要介紹了Vue3中Element Plus Table(表格)點擊獲取對應id方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Mint UI組件庫CheckList使用及踩坑總結(jié)
這篇文章主要介紹了Mint UI組件庫CheckList使用及踩坑總結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12

