如果按本文操作遇到一些問(wèn)題報(bào)錯(cuò)，如C:\Users\milyyy\AppData\Roaming\npm-cache\_logs\2018-11-27T07_36_17_406Z-debug.log等等

解決辦法可以參見我的另一篇文章：electron打包VUE項(xiàng)目中遇見的報(bào)錯(cuò)問(wèn)題及解決

本篇文章源碼請(qǐng)移步我的GitHub地址：簡(jiǎn)易使用electron打包vue

踩過(guò)了無(wú)數(shù)的坑，碰到了很多問(wèn)題。終于實(shí)踐出一套可行的解決方案，基本步驟如下：

1.首先從electron官網(wǎng)克隆一個(gè)demo

選擇一個(gè)你想存放項(xiàng)目的盤。（可以不用新建文件夾，看個(gè)人）直接運(yùn)行cmd；

注意這里的最好是npm的依賴包

npm與cnpm的區(qū)別

• 說(shuō)到npm與cnpm的區(qū)別，可能大家都知道，但大家容易忽視的一點(diǎn)，是cnpm裝的各種node_module，這種方式下所有的包都是扁平化的安裝。
• 一下子node_modules展開后有非常多的文件。導(dǎo)致了在打包的過(guò)程中非常慢。但是如果改用npm來(lái)安裝node_modules的話，所有的包都是樹狀結(jié)構(gòu)的，層級(jí)變深。
• 由于這個(gè)不同，對(duì)一些項(xiàng)目比較大的應(yīng)用，很容易出現(xiàn)打包過(guò)程慢且node內(nèi)存溢出的問(wèn)題
• 所以建議大家在打包前，講使用cnpm安裝的依賴包刪除，替換成npm安裝的依賴包。

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
cnpm install //npm,cnpm 都可以，cnpm速度較快.
npm start

項(xiàng)目跑起來(lái)以后， 就會(huì)出現(xiàn)electron的桌面頁(yè)面，找到clone下來(lái)項(xiàng)目的入口文件main.js 和package.json.接下來(lái)修改路徑和配置。

//----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",            //--修改的，為后面做準(zhǔn)備
  "scripts": {
    "start": "electron ."       
  }
 

2. 接下來(lái)，在已創(chuàng)建好的vue-cli項(xiàng)目中

安裝electron依賴，運(yùn)行如下命令：

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

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

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

3. 在新建的項(xiàng)目的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"     //增加的指令

接著執(zhí)行：

npm run build               //生成dist目錄(包含靜態(tài)資源文件)    
npm run electron_dev        //啟動(dòng)electron

現(xiàn)在，生成桌面應(yīng)用基本成功實(shí)現(xiàn)了，還剩下最后一步：打包！

首先，復(fù)制build目錄下的electron.js到dist目錄中，注意很關(guān)鍵的一步是復(fù)制過(guò)來(lái)之后，要調(diào)整一下loadURL路徑的格式，

像這樣：

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

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

    "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"         //--新增的命令--

接著，如果你要替換應(yīng)用圖標(biāo)的話，就在項(xiàng)目中的scr文件夾下的assets目錄下，放入你要設(shè)置的exe文件的圖標(biāo)，為.ico格式。

這里指的注意的是，你的ico圖標(biāo)是什么名稱，上一條的electron_build里面的路徑最后就要改成你圖標(biāo)的名稱，像這里的yizhu.ico一樣，yizhu.ico就是我自己圖標(biāo)的名稱。（這點(diǎn)很重要?。?/p>

這里我要強(qiáng)調(diào)一點(diǎn), 有同學(xué)到這里運(yùn)行報(bào)錯(cuò), 很有可能是你的圖片路徑?jīng)]改過(guò)來(lái). 還有一點(diǎn)就是你把自己的圖片強(qiáng)行修改為ico格式了,這點(diǎn)是不允許的. 一定要是原生的ico格式的圖標(biāo). 且看我最下面截圖的ico的圖標(biāo)是怎樣的. 這里我附上一個(gè)轉(zhuǎn)為ico格式的鏈接. 操作簡(jiǎn)單.

最后，運(yùn)行

npm run build     //刷新靜態(tài)資源文件
npm run electron_build   //啟動(dòng)

這個(gè)時(shí)候已經(jīng)生成了aps-win32-ia32文件夾，找到里面的helloworld.exe文件即可運(yùn)行。當(dāng)然，我這里沒有給文件重命名，你們可以自行命名。

到這里，exe文件已經(jīng)最終完成。

下面附上我的文件目錄

多操作幾次，多看報(bào)錯(cuò)代碼，仔細(xì)看上面說(shuō)了什么好對(duì)癥下藥。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論