Electron 是一個非常強大的工具，它可以用來構建跨平臺的桌面應用，編寫一次到處運行。

知乎視頻?www.zhihu.com

0. 準備工作

安裝好nodejs

• 在終端中輸入 node -v 看到版本號即為成功

node -v # 輸出 v14.11.0

• 安裝一個IDE，推薦使用vscode
• 安裝cnpm 包管理工具，用來加速下載依賴

npm install -g cpm

• 安裝vue-cli 管理工具

cnpm install -g @vue/cli

1. 新建一個vue項目

找一個空文件夾，執行以下命令，創建一個空文件，執行以下命令

vue create electrondemo

第三個electrondemo 為項目名稱

按照提示，進入electrondemo文件夾，并運行起來

cd electrondemo npm run serve

可以看到實例項目已經運行起來了

2. 安裝electron-builder

electron-builder是一個開箱即用的構建跨平臺electron桌面應用的解決方案

執行以下命令安裝electron-builder

vue add electron-builder

安裝成功后，可以看見package.json 中已經增加了幾個命令

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","electron:build": "vue-cli-service electron:build","electron:serve": "vue-cli-service electron:serve","postinstall": "electron-builder install-app-deps","postuninstall": "electron-builder install-app-deps"},

這里將用到的兩個命令是

npm run electron:serve # 啟動調試 npm run electron:build # 生成項目

在命令行中輸入

npm run electron:serve

耐心等待，成功后 應用程序就運行起來了

自動配置中，會打開右側的調試工具

運行以下命令將項目打包

npm run electron:build

如果在國內的話，可能會遇到下載依賴特別慢的問題

很多解決方案是通過手動下載 electron 到 cache 目錄

其實只需要配置 electron 的下載源即可

在項目根目錄新建 vue.config.js,并添加以下內容

//vue.config.js module.exports = {pluginOptions: {electronBuilder: {builderOptions: {..."electronDownload": {"mirror": "https://npm.taobao.org/mirrors/electron/"}}}} }

即配置electron的下載路徑為https://npm.taobao.org/mirrors/electron/

配置之后

再次運行以下命令打包

npm run electron:build

可以在輸出中看見下載路徑為配置的路徑了

Build complete！

build完成后，可以在dist_electron中看見打包完成的應用啦！

直接運行dmg/exe，可以看到程序成功運行起來啦

總結

以上是生活随笔為你收集整理的jenkins vue 打包特别慢_从零开始 使用VUE开发桌面客户端的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。