打包指令_将Vue项目打包为Windows应用(.exe)
2021年1月9日更新:
新增:解決國內(nèi)用戶下載electron速度太慢的問題
調(diào)整:由于electron版本升級,刪除原文中對electron版本限制在2.0的命令行語句
背景
朋友是做商品零售,每月都需要將銷售數(shù)據(jù)匯總至年度銷售表格中,在這個過程中存在很多重復(fù)性的工作,無奈中。在一次聊天中,我了解到他的需求,就用 Vue 做了一個頁面,可以實(shí)現(xiàn) Excel 轉(zhuǎn)成 JSON 進(jìn)行操作,最后再將 JSON 轉(zhuǎn)成 Excel ,雖然后來了解到用 Python應(yīng)該會更高效,待日后來研究!
不過咱好歹有個圖形界面,用戶體驗(yàn)好!(自我安慰一波~)
接下來問題便來了,朋友完全不懂編程,每次都準(zhǔn)備開發(fā)環(huán)境也挺麻煩,便想著能不能做成可執(zhí)行文件.exe,直接雙擊安裝,生成快捷方式,直接就能用,人性化點(diǎn)贊!
1. Vue 項目打包為桌面應(yīng)用
在網(wǎng)上看了下,常用的解決方案有 Electron 和 nw.js 等,廣大群眾都采用的 Electron ,鄙人就跟個風(fēng)吧~
在學(xué)習(xí)的過程中,發(fā)現(xiàn)關(guān)于 Electron ,常見的有兩種打包方法:
第一種:將自己的 vue 項目打包,放到官方的 demo 文件中,改變打包路徑
第二種:在自己的 vue 的項目中引入插件,然后打包
經(jīng)過一番嘗試,我決定采用第一種,原因是:特!別!簡!單!
下面詳細(xì)介紹下第一種方法:
第一步:把electron的官方例子扒下來,下面簡稱A,留著待用:
git clone https://github.com/electron/electron-quick-start第二步:進(jìn)入我們自己的項目(下面簡稱B),修改公共路徑為相對路徑(很多同學(xué)都是這步出了問題,導(dǎo)致 npm run build 后出現(xiàn)白屏情況):
- 如果你是 vue-cli3 構(gòu)建的項目:
執(zhí)行下列指令,打開vue-cli圖形配置界面,選擇配置,修改公共路徑為 ./ , 保存即可:
vue ui或者你可以點(diǎn)擊上圖中右上角的 打開 vue 配置, 或者在項目的根目錄中創(chuàng)建 vue.config.js, 設(shè)置以下內(nèi)容:
module.exports = { lintOnSave: undefined, publicPath: './', outputDir: undefined, assetsDir: undefined, runtimeCompiler: undefined, productionSourceMap: undefined, parallel: undefined, css: undefined }- 如果你是vue-cli2 或者 webpack 創(chuàng)建的項目:
進(jìn)入config文件夾下的 index.js ,將其中的 assetsPublicPath 修改為相對路徑 ./ ,保存即可:
第三步:打包你的項目,我相信這步你已經(jīng)輕車熟路了~,將打包出來的 dist 文件夾復(fù)制到之前下載的A文件夾中
npm run build第四步:進(jìn)入剛才下載的A項目,刪除項目根目錄下的 index.html 文件。
第五步:在A項目中找到入口文件 main.js ,修改打包的文件路徑為我們的index.html:
// main.js 原始內(nèi)容 mainWindow.loadFile('index.html') // 修改后的內(nèi)容 mainWindow.loadFile('./dist/index.html')第六步:在A項目中檢查 package.json 的命令,正常情況下,運(yùn)行下列指令即可進(jìn)行打包效果預(yù)覽:
// 國內(nèi)網(wǎng)絡(luò)下載electron可能很慢,建議設(shè)置 // npm config set registry https://registry.npm.taobao.org/ // npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/npm install npm run start打包成功以后就會出來一個桌面應(yīng)用,如果一切正常的話你已經(jīng)可以看到自己的項目了,如果出現(xiàn)白屏的情況,請返回查看第二步~
第七步:在A項目中,下載打包需要的依賴 electron-packager
npm install electron-packager --save-dev第八步:在A項目中,進(jìn)入 package.json ,在 scripts 中添加 packager 指令,如下所示:
"scripts": { "start": "electron .", "packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"//此處為添加命令 }如果你想修改最后打包出來的exe文件圖標(biāo),類似于favicon,或者EXE的名字,可以設(shè)置 packager 的指令內(nèi)容為,icon的路徑自己調(diào)整下哦,更多配置內(nèi)容請查閱文檔哈:
"packager": "electron-packager ./ YOUR_APP_NAME --platform=win32 --arch=x64 --icon=./dist/favicon.ico --overwrite"第九步:運(yùn)行命令打包,然后項目中會出現(xiàn)一個 App-win32-x64 的文件夾,這個文件就是打包好的桌面應(yīng)用,文件夾里有一個 App.exe 文件,App.exe就是這個項目的啟動文件:
npm run packager哈哈!大功告成!什么?為什么打包好的不是一個EXE文件,而是一個文件夾?
我只能說太天真!下面我們繼續(xù)封裝EXE安裝包
將桌面應(yīng)用文件夾封裝成EXE安裝包
有很多方法可以達(dá)到我們的目的,我在這里選擇 Inno Setup 作為封裝工具,整個過程也非常開心愉快~
下面這篇文章寫的比較全面,是我想要的內(nèi)容,哈哈,親測有效~
開源Inno Setup官網(wǎng)下載、安裝、打包教程(官網(wǎng)安裝向?qū)е形恼Z言包)?www.cnblogs.com最后最后最后,如果你想從頭開始搭建自己的第一臺云服務(wù)器,歡迎查看我的文章:
MeCC:超詳細(xì)!阿里云服務(wù)器ECS建站指南!
MeCC:阿里云服務(wù)器建站指南(進(jìn)階篇):發(fā)布你的個人主頁
總結(jié)
以上是生活随笔為你收集整理的打包指令_将Vue项目打包为Windows应用(.exe)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: unity游戏中提示信息如何实现_Uni
- 下一篇: vue打包的app如何设置自动清理软件缓