如何用electron把vue項目打包為桌面應用exe文件

Posted on by

如果按本文操作遇到一些問題報錯，如C:\Users\milyyy\AppData\Roaming\npm-cache\_logs\2018-11-27T07_36_17_406Z-debug.log等等

解決辦法可以參見我的另一篇文章：electron打包VUE項目中遇見的報錯問題及解決

本篇文章源碼請移步我的GitHub地址：簡易使用electron打包vue

踩過瞭無數的坑，碰到瞭很多問題。終於實踐出一套可行的解決方案，基本步驟如下：

1.首先從electron官網克隆一個demo

選擇一個你想存放項目的盤。（可以不用新建文件夾，看個人）直接運行cmd；

註意這裡的最好是npm的依賴包

npm與cnpm的區別

  • 說到npm與cnpm的區別，可能大傢都知道，但大傢容易忽視的一點，是cnpm裝的各種node_module，這種方式下所有的包都是扁平化的安裝。
  • 一下子node_modules展開後有非常多的文件。導致瞭在打包的過程中非常慢。但是如果改用npm來安裝node_modules的話，所有的包都是樹狀結構的，層級變深。
  • 由於這個不同，對一些項目比較大的應用，很容易出現打包過程慢且node內存溢出的問題
  • 所以建議大傢在打包前，講使用cnpm安裝的依賴包刪除，替換成npm安裝的依賴包。
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
cnpm install //npm,cnpm 都可以，cnpm速度較快.
npm start

項目跑起來以後， 就會出現electron的桌面頁面，找到clone下來項目的入口文件main.js 和package.json.接下來修改路徑和配置。

//----main.js----
function createWindow () {
 
  // and load the index.html of the app.
  mainWindow.loadURL(`file://${__dirname}/../dist/index.html`)  //修改這裡
//package.json
{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "electron.js",            //--修改的，為後面做準備
  "scripts": {
    "start": "electron ."       
  }

2. 接下來，在已創建好的vue-cli項目中

安裝electron依賴，運行如下命令：

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

現在將clone項目中的main.js拷到剛剛新建的項目中的build文件夾下，並重命名為electron.js  , 並更改config/index.js中生產模式下（build）的assetsPublicPth

  build: {
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
 
    assetsPublicPath: './',     //這裡改為./

3. 在新建的項目的package.json文件中增加一條指令

如下：

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "build": "node build/build.js",
    "electron_dev": "npm run build && electron build/electron.js"     //增加的指令

接著執行：

npm run build               //生成dist目錄(包含靜態資源文件)    
npm run electron_dev        //啟動electron

現在，生成桌面應用基本成功實現瞭，還剩下最後一步：打包！

首先，復制build目錄下的electron.js到dist目錄中，註意很關鍵的一步是復制過來之後，要調整一下loadURL路徑的格式，

像這樣：

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({
 
  })
 
  // and load the index.html of the app.
  mainWindow.loadURL(`${__dirname}/index.html`)     //--修改的--

接著，復制clone例子的package.json到新建項目的dist目錄中。在項目的package.json中（註意不是dist下的package.json）為之前下載好的electron-packager，增加一條啟動命令。

    "build": "node build/build.js",
    "electron_dev": "npm run build && electron build/electron.js",
    "electron_build": "electron-packager ./dist/ --platform=win32 --arch=ia32  --icon=./src/assets/yizhu.ico  --overwrite"         //--新增的命令--

接著，如果你要替換應用圖標的話，就在項目中的scr文件夾下的assets目錄下，放入你要設置的exe文件的圖標，為.ico格式。

這裡指的註意的是，你的ico圖標是什麼名稱，上一條的electron_build裡面的路徑最後就要改成你圖標的名稱，像這裡的yizhu.ico一樣，yizhu.ico就是我自己圖標的名稱。（這點很重要！）

這裡我要強調一點, 有同學到這裡運行報錯, 很有可能是你的圖片路徑沒改過來. 還有一點就是你把自己的圖片強行修改為ico格式瞭,這點是不允許的. 一定要是原生的ico格式的圖標. 且看我最下面截圖的ico的圖標是怎樣的. 這裡我附上一個轉為ico格式的鏈接. 操作簡單.

最後，運行

npm run build     //刷新靜態資源文件
npm run electron_build   //啟動

這個時候已經生成瞭aps-win32-ia32文件夾，找到裡面的helloworld.exe文件即可運行。當然，我這裡沒有給文件重命名，你們可以自行命名。

到這裡，exe文件已經最終完成。

下面附上我的文件目錄

多操作幾次，多看報錯代碼，仔細看上面說瞭什麼好對癥下藥。

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

推薦閱讀：