如何用electron把vue項目打包為桌面應用exe文件
如果按本文操作遇到一些問題報錯，如C:\Users\milyyy\AppData\Roaming\npm-cache\_logs\2018-11-27T07_36_17_406Z-debug.log等等
解決辦法可以參見我的另一篇文章：electron打包VUE項目中遇見的報錯問題及解決
本篇文章源碼請移步我的GitHub地址：簡易使用electron打包vue
踩過了無數(shù)的坑，碰到了很多問題。終于實踐出一套可行的解決方案，基本步驟如下：
1.首先從electron官網(wǎng)克隆一個demo
選擇一個你想存放項目的盤。（可以不用新建文件夾，看個人）直接運行cmd；
注意這里的最好是npm的依賴包
npm與cnpm的區(qū)別
- 說到npm與cnpm的區(qū)別，可能大家都知道，但大家容易忽視的一點，是cnpm裝的各種node_module，這種方式下所有的包都是扁平化的安裝。
- 一下子node_modules展開后有非常多的文件。導致了在打包的過程中非常慢。但是如果改用npm來安裝node_modules的話，所有的包都是樹狀結(jié)構(gòu)的，層級變深。
- 由于這個不同，對一些項目比較大的應用，很容易出現(xiàn)打包過程慢且node內(nèi)存溢出的問題
- 所以建議大家在打包前，講使用cnpm安裝的依賴包刪除，替換成npm安裝的依賴包。
git clone https://github.com/electron/electron-quick-start cd electron-quick-start cnpm install //npm,cnpm 都可以，cnpm速度較快. npm start
項目跑起來以后， 就會出現(xiàn)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. 接下來，在已創(chuàng)建好的vue-cli項目中
安裝electron依賴，運行如下命令：
npm install electron --save-dev npm install electron-packager --save-dev
現(xiàn)在將clone項目中的main.js拷到剛剛新建的項目中的build文件夾下，并重命名為electron.js , 并更改config/index.js中生產(chǎn)模式下（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" //增加的指令接著執(zhí)行：
npm run build //生成dist目錄(包含靜態(tài)資源文件) npm run electron_dev //啟動electron
現(xiàn)在，生成桌面應用基本成功實現(xiàn)了，還剩下最后一步：打包！
首先，復制build目錄下的electron.js到dist目錄中，注意很關(guān)鍵的一步是復制過來之后，要調(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`) //--修改的--接著，復制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就是我自己圖標的名稱。（這點很重要?。?/p>
這里我要強調(diào)一點, 有同學到這里運行報錯, 很有可能是你的圖片路徑?jīng)]改過來. 還有一點就是你把自己的圖片強行修改為ico格式了,這點是不允許的. 一定要是原生的ico格式的圖標. 且看我最下面截圖的ico的圖標是怎樣的. 這里我附上一個轉(zhuǎn)為ico格式的鏈接. 操作簡單.
最后，運行
npm run build //刷新靜態(tài)資源文件 npm run electron_build //啟動
這個時候已經(jīng)生成了aps-win32-ia32文件夾，找到里面的helloworld.exe文件即可運行。當然，我這里沒有給文件重命名，你們可以自行命名。
到這里，exe文件已經(jīng)最終完成。
下面附上我的文件目錄
多操作幾次，多看報錯代碼，仔細看上面說了什么好對癥下藥。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了vue-scroller記錄滾動位置的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
在瀏覽網(wǎng)頁時我們有些時候需要記住一些用戶選擇的信息,比如登陸時我們?nèi)绻x擇了記住密碼,那么我們下次進入該網(wǎng)頁時就會有你上次的登陸信息,下面這篇文章主要給大家介紹了關(guān)于vuex存儲數(shù)據(jù)的幾種方法,需要的朋友可以參考下2022-10-10
如何將iconfont圖標引入到vant的Tabbar標簽欄里邊
這篇文章主要介紹了如何將iconfont圖標引入到vant的Tabbar標簽欄里邊，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在項目開發(fā)過程中,我們經(jīng)常會用到svg矢量圖,本文主要介紹了vue3中引入svg矢量圖的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下2023-11-11
Ant Design Vue pro 動態(tài)路由的實現(xiàn)和打包方式
這篇文章主要介紹了Ant Design Vue pro 動態(tài)路由的實現(xiàn)和打包方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要給大家介紹了關(guān)于vue3組件式彈窗打開的3種方式,彈窗組件是常見的交互組件,它能夠彈出一些提示信息、提醒用戶進行操作等等,需要的朋友可以參考下2023-07-07
今天小編就為大家分享一篇vue中設置、獲取、刪除cookie的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了vue自定義可選時間的日歷組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家介紹了Vue框架和前后端開發(fā)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
詳解基于Vue的支持數(shù)據(jù)雙向綁定的select組件
這篇文章主要介紹了詳解基于Vue的支持數(shù)據(jù)雙向綁定的select組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09