背景

朋友是做商品零售，每月都需要將銷售數據匯總至年度銷售表格中，在這個過程中存在很多重複性的工作，無奈中。在一次聊天中，我了解到他的需求，就用 Vue 做了一個頁面，可以實現 Excel 轉成 JSON 進行操作，最後再將 JSON 轉成 Excel ，雖然後來了解到用 Python應該會更高效，待日後來研究！

不過咱好歹有個圖形界面，用戶體驗好！（自我安慰一波~）

接下來問題便來了，朋友完全不懂編程，每次都準備開發環境也挺麻煩，便想著能不能做成可執行文件.exe，直接雙擊安裝，生成快捷方式，直接就能用，人性化點贊！

1. Vue 項目打包為桌面應用

在網上看了下，常用的解決方案有 Electron 和 nw.js 等，廣大群眾都採用的 Electron ，鄙人就跟個風吧~

在學習的過程中，發現關於 Electron ，常見的有兩種打包方法：

第一種：將自己的 vue 項目打包，放到官方的 demo 文件中，改變打包路徑

第二種：在自己的 vue 的項目中引入插件，然後打包

經過一番嘗試，我決定採用第一種，原因是：特！別！簡！單！

下面詳細介紹下第一種方法：

第一步：把electron的官方例子扒下來，下面簡稱A，留著待用：

git clone https://github.com/electron/electron-quick-start

第二步：進入我們自己的項目（下面簡稱B），修改公共路徑為相對路徑（很多同學都是這步出了問題，導致 npm run build 後出現白屏情況）：

  • 如果你是 vue-cli3 構建的項目：

執行下列指令，打開vue-cli圖形配置界面，選擇配置，修改公共路徑為 ./ , 保存即可：

vue ui

或者你可以點擊上圖中右上角的 打開 vue 配置， 或者在項目的根目錄中創建 vue.config.js， 設置以下內容：

module.exports = {
lintOnSave: undefined,
publicPath: ./,
outputDir: undefined,
assetsDir: undefined,
runtimeCompiler: undefined,
productionSourceMap: undefined,
parallel: undefined,
css: undefined
}

  • 如果你是vue-cli2 或者 webpack 創建的項目：

進入config文件夾下的 index.js ，將其中的 assetsPublicPath 修改為相對路徑 ./ ，保存即可：

第三步：打包你的項目，我相信這步你已經輕車熟路了~，將打包出來的 dist 文件夾複製到之前下載的A文件夾中

npm run build

第四步：進入剛才下載的A項目，刪除項目根目錄下的 index.html 文件。

第五步：在A項目中找到入口文件 main.js ，修改打包的文件路徑為我們的index.html：

// main.js 原始內容
mainWindow.loadFile(index.html)
// 修改後的內容
mainWindow.loadFile(./dist/index.html)

第六步：在A項目中檢查 package.json 的命令，正常情況下，運行下列指令即可進行打包效果預覽：

npm install
npm run start

打包成功以後就會出來一個桌面應用，如果一切正常的話你已經可以看到自己的項目了，如果出現白屏的情況，請返回查看第二步~

第七步：在A項目中，下載打包需要的依賴 electron-packager

npm install electron-packager --save-dev

第八步：在A項目中，進入 package.json ，在 scripts 中添加 packager 指令，如下所示：

"scripts": {
"start": "electron .",
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --electron-version=2.0.0 --overwrite"//此處為添加命令
}

如果你想修改最後打包出來的exe文件圖標，類似於favicon，或者EXE的名字，可以設置 packager 的指令內容為，icon的路徑自己調整下哦，更多配置內容請查閱文檔哈：

"packager": "electron-packager ./ YOUR_APP_NAME --platform=win32 --arch=x64 --electron-version=2.0.0 --icon=./dist/favicon.ico --overwrite"

第九步：運行命令打包，然後項目中會出現一個 App-win32-x64 的文件夾，這個文件就是打包好的桌面應用，文件夾里有一個 App.exe 文件，App.exe就是這個項目的啟動文件：

npm run packager

哈哈！大功告成！什麼？為什麼打包好的不是一個EXE文件，而是一個文件夾？

我只能說太天真！下面我們繼續封裝EXE安裝包

將桌面應用文件夾封裝成EXE安裝包

有很多方法可以達到我們的目的，我在這裡選擇 Inno Setup 作為封裝工具，整個過程也非常開心愉快~

下面這篇文章寫的比較全面，是我想要的內容，哈哈，親測有效~

開源Inno Setup官網下載、安裝、打包教程（官網安裝嚮導中文語言包）?

www.cnblogs.com圖標

最後最後最後，如果你想從頭開始搭建自己的第一台雲伺服器，歡迎查看我的文章：

MeCC：超詳細！阿里雲伺服器ECS建站指南！

MeCC：阿里雲伺服器建站指南（進階篇）：發布你的個人主頁


推薦閱讀：
相关文章