用electron打包vue項目中的報錯問題及解決

Posted on by

如何用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! [email protected] electron_dev: `electron build/electron.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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

出現以上問題，很有可能說明瞭一個問題，那麼現在，我們再重新運行一下（再次強調在根目錄中）

npm install electron --save-dev
npm install electron-packager --save-dev

這個時候如果再報錯，檢查一下我們app下的package.json文件，裡面的內容如果是這樣：（先別著急）

  "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

成功！

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：