1.打包

這裡使用vue原生打包命令，對vue專案進行打包

npm run build

2.配置 Electron

使用 Electron 製作桌面應用需要兩個配置檔案

1.package.on

建立一個package.json檔案，將以下程式碼放入

{
  "name": "demo",//專案名稱
  "productName": "demo","author": "作者","version": "1.0.4","main": "main.js","description": "專案描述","scripts": {
  	"start": "electron .",//啟動electron專案
    "pack": "electron-builder --dir","dist": "electron-builder","postinstall": "electron-builder install-app-deps","packager": "electron-packager . myClient --win --out ../myClient --arch=x64 http://www.cppcns.com
 
--app-version=0.0.1 --electron-version=2.0.0" //將專案打包為exe檔案
  },"build": {
    "electronVersion": "2.0.18","win": {
      "requestedExecutionLevel": "highestAvailable","target": [
        {
          "target": "nsis","arch": [
            "x64"
          ]
        }
      ]
    },"appId": "demo","artifactName": "demo-${version}-${arch}.${ext}","nsis": {
      "artifactName": "demo-${version}-${arch}.${ext}"
    }
  },"dependencies": {
    "core-js": "^2.4.1","electron-updater": "^2.22.1"
  },"devDependen
 
cies": {
    "electron-packager": "^12.1.0","electron-builder": "^20.19.2"
  }
}

2.mian.js

建立main.js 將以下程式碼放入

【注】win.webContents.openDevTools(); 這句程式碼的意思是開啟除錯視窗，生成exe檔案時需要註釋掉

onst {app,BrowserWindow} =require('electron');//引入electron
let win;
const path = require('path')
let windowConfig = {
  width:800,height:600,webPreferences:{preload: path.resolve(__dirname,'electron-preload.js')}
};//視窗配置程式執行視窗的大小
function createWindow(){
  win = new BrowserWindow(windowConfig);//建立一個視窗
  win.loadURL(`file://${__dirna客棧
 
me}/index.html`);//在視窗內要展示的內容index.html 就是打包生成的index.html
  win.webContents.openDevTools();  //開啟除錯工具
  win.on('close',() => {
    //回收BrowserWindow物件www.cppcns.com
    win = null;
  });
  win.on('resize',() => {
    win.reload();
  })
}
app.on('ready',createWindow);
app.on('loaded',()=>{
  console.log("aaa")
});
app.on('window-all-closed',() => {
  app.quit();
});
app.on('activate',() => {
  if(win == null){
 程式設計客棧   createWindow();
  }
});

const { ipcMain } = require('electron')
ipcMain.on("ping",function(even,arg){
  console.log(arg)
  even.returnValue = "pong"
})

3.將package.json檔案和main.js檔案放入到 vue打包完成的dist目錄下

4.在dist目錄下開啟node命令視窗，執行 npm install 或 cnpm install 下載依賴

npm install

5.依賴下載成功後 執行 npm start ，啟動該專案，並檢視專案是否執行成功

npm start

執行成功後的結果：

6.如果執行後沒有發現bug，則執行 npm run packager ，將專案製作成exe檔案，製作成功後，會在當前目錄下生成桌面應用的安裝包

npm run packager

打包成功後的資料夾

點選該exe檔案就可以直接開啟應用了

到此這篇關於vue + Electron 製作桌面應用的文章就介紹到這了,更多相關vue Electron 桌面應用內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！