腳本之家服務器常用軟件

快捷導航

Vue項目打包成exe可執(zhí)行文件的實現過程(無瑕疵,完美版)

更新時間：2022年11月15日 10:09:22 作者：打小就霸

突然接到公司需求,說客戶想讓我們把項目直接打包,所以下面這篇文章主要給大家介紹了關于Vue項目打包成exe可執(zhí)行文件的實現過程,文中通過圖文介紹的非常詳細,需要的朋友可以參考下

Vue項目打包成exe可執(zhí)行文件

實現思路：

從electron官網上拉取代碼，把官網上拉取下來項目中的index.html替換成自己vue項目打包好的dist文件中的index.html，輸入打包exe的命令即可

1、拉取electron官網上的demo，拉下來之后安裝依賴，項目跑起來之后，就不用管demo了，開始配置自己的Vue項目

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

2、修改自己項目的vue.config.js，路徑必須修改為 ./，不是這個后續(xù)打包好的頁面可能會出現白屏，加載不出來的情況

module.exports = {   
	publicPath: './',   
}

3、打包自己的Vue項目，這步應該很熟了，將打包出來的 dist 文件夾復制到之前拉取的electron-quick-start文件夾中，和node_modules同級就行

npm run build

然后咱自己的項目就不用管了，剩下的就交給拉下來的electron-quick-start項目吧

4、在electron-quick-start項目中，下載打包需要的依賴 electron-packager

npm install electron-packager --save-dev

5、進入electron-quick-start項目，刪除項目根目錄下的 index.html 文件

6、在electron-quick-start項目中找到入口文件 main.js ，修改打包的文件路徑為我們的index.html（替換成我們的文件非常非常的重要，注意行數，一般都在16行多一點）

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

7、在electron-quick-start項目中，進入 package.json ，在 scripts 中添加 packager 指令，如下所示：

"scripts": { 
"start": "electron .", 
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"
}

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

npm run packager

9、打包完以后，項目中會出現 App-win32-x64文件夾，進去之后，雙擊App.exe就可以訪問了

10、你已經成功了，撒花

總結

到此這篇關于Vue項目打包成exe可執(zhí)行文件的文章就介紹到這了,更多相關Vue項目打包成exe可執(zhí)行文件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线