Vue項(xiàng)目打包成exe可執(zhí)行文件的實(shí)現(xiàn)過程(無瑕疵,完美版)
Vue項(xiàng)目打包成exe可執(zhí)行文件
實(shí)現(xiàn)思路：
從electron官網(wǎng)上拉取代碼，把官網(wǎng)上拉取下來項(xiàng)目中的index.html替換成 自己vue項(xiàng)目打包好的dist文件中的index.html，輸入打包exe的命令即可
1、 拉取electron官網(wǎng)上的demo，拉下來之后安裝依賴，項(xiàng)目跑起來之后，就不用管demo了，開始配置自己的Vue項(xiàng)目
git clone https://github.com/electron/electron-quick-start npm i npm run start
2、修改自己項(xiàng)目的vue.config.js，路徑必須修改為 ./，不是這個(gè)后續(xù)打包好的頁面可能會出現(xiàn)白屏，加載不出來的情況
module.exports = {
publicPath: './',
}
3、打包自己的Vue項(xiàng)目，這步應(yīng)該很熟了，將打包出來的 dist 文件夾復(fù)制到之前拉取的electron-quick-start文件夾中，和node_modules同級就行
npm run build
然后咱自己的項(xiàng)目就不用管了，剩下的就交給拉下來的electron-quick-start項(xiàng)目吧
4、在electron-quick-start項(xiàng)目中，下載打包需要的依賴 electron-packager
npm install electron-packager --save-dev
5、進(jìn)入electron-quick-start項(xiàng)目，刪除項(xiàng)目根目錄下的 index.html 文件
6、在electron-quick-start項(xiàng)目中找到入口文件 main.js ，修改打包的文件路徑為我們的index.html（替換成我們的文件非常非常的重要，注意行數(shù)，一般都在16行多一點(diǎn)）
// main.js 原始內(nèi)容
mainWindow.loadFile('index.html')
// 修改后的內(nèi)容
mainWindow.loadFile('./dist/index.html')*
7、在electron-quick-start項(xiàng)目中，進(jìn)入 package.json ，在 scripts 中添加 packager 指令，如下所示：
"scripts": {
"start": "electron .",
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"
}
8、運(yùn)行命令打包，然后項(xiàng)目中會出現(xiàn)一個(gè) App-win32-x64 的文件夾，這個(gè)文件就是打包好的桌面應(yīng)用，文件夾里有一個(gè) App.exe 文件，App.exe就是這個(gè)項(xiàng)目的啟動(dòng)文件
npm run packager
9、打包完以后，項(xiàng)目中會出現(xiàn) App-win32-x64文件夾，進(jìn)去之后，雙擊App.exe就可以訪問了
10、你已經(jīng)成功了，撒花
總結(jié)
到此這篇關(guān)于Vue項(xiàng)目打包成exe可執(zhí)行文件的文章就介紹到這了,更多相關(guān)Vue項(xiàng)目打包成exe可執(zhí)行文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解Vue實(shí)現(xiàn)鏈接生成二維碼并支持下載
在現(xiàn)代 Web 應(yīng)用中,快速分享鏈接是一項(xiàng)常見需求,二維碼作為一種簡潔的分享方式,受到了廣泛歡迎,所以本文將介紹如何使用 Vue 純前端技術(shù)實(shí)現(xiàn)動(dòng)態(tài)生成鏈接二維碼的方法,需要的可以參考下2024-03-03
vue和小程序項(xiàng)目中使用iconfont的方法
這篇文章主要介紹了vue中和小程序中使用iconfont的方法，本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了vue 父組件調(diào)用子組件方法及事件的相關(guān)資料，父組件傳入數(shù)組子組件循環(huán)來創(chuàng)建不同的組件模塊,所有事件都在子組件內(nèi)部.怎么實(shí)現(xiàn)這樣一個(gè)功能呢？接下來跟隨腳本之家小編一起看看吧2018-03-03
這篇文章主要介紹了vue如何重置data的所有屬性，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3 的ref和reactive的用法和區(qū)別示例解析
ref和reactive是Vue3中用來實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式的API,一般情況下,ref定義基本數(shù)據(jù)類型,reactive定義引用數(shù)據(jù)類型,本文給大家介紹Vue3 的ref和reactive的用法和區(qū)別,感興趣的朋友一起看看吧2023-10-10
vue中this.$message的實(shí)現(xiàn)過程詳解
Message在開發(fā)中的使用頻率很高，也算是Element-UI組件庫中比較簡單的，對于感興趣的朋友可以一起探討一下Message組件的實(shí)現(xiàn)，本文詳細(xì)介紹了vue中this.$message的實(shí)現(xiàn)過程，感興趣的同學(xué)可以參考一下2023-04-04
vue cli4.0項(xiàng)目引入typescript的方法
這篇文章主要介紹了vue cli4.0項(xiàng)目引入typescript的方法，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了Vue Element UI使用中遇到的問題，對ElementUI感興趣的同學(xué)，可以參考下2021-05-05
這篇文章主要為大家詳細(xì)介紹了Vue的過濾器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
最近在做uni-app的時(shí)候需要用到vant組件，在網(wǎng)上看到了很多的使用vant組件的方法，但是講解的大多繁瑣，或者無法使用，現(xiàn)把最新，最實(shí)用的vant組件的使用方法分享給大家,需要的朋友可以參考下2023-02-02