欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

手把手教你使用electron將vue項目打包成exe

 更新時間：2023年01月10日 10:53:47   作者：什么都干的派森  
Electron相當于一個瀏覽器的外殼,可以把現(xiàn)有的vue程序嵌入到殼里面,下面這篇文章主要給大家介紹了關(guān)于如何使用electron將vue項目打包成exe的相關(guān)資料,需要的朋友可以參考下

一、前言

node.js 版本要在 17+

建議使用 17.9.1 的 node 和 8.11.0 的 npm

node和npm的版本對應關(guān)系如下，node 可以去這里下載

https://nodejs.org/zh-cn/download/releases/  或者點擊這里下載

下載這個 x86.msi 的，安裝時候改下安裝位置，然后一直下一步就行了

node 所對應的 npm 用如下命令安裝

npm install -g npm@8.11.0

二、實現(xiàn)方法

1.跑通示例代碼 electron-quick-start

<1>clone示例代碼

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

項目結(jié)構(gòu)如下

<2>進入項目根目錄，下載依賴

# 進入項目目錄
cd electron-quick-start
# 下載項目需要的依賴
npm install
# 安裝 electron 
npm install electron --save-dev
# 安裝 packager 包依賴
npm install electron-packager --save-dev

<3>測試運行

# 運行一下 Demo 看看是否可以成功
npm run start

運行結(jié)果如下

ps:

npm 安裝有些包會被墻掉，可能會失敗，報錯如下：

如果失敗了可以安裝 cnpm，安裝 cnpm 的方法如下：

# 安裝并指定淘寶源
npm install -g cnpm --registry=https://registry.npm.taobao.org

然后把上面的 npm 命令都替換成 cnpm 即可，替換后的代碼如下：

# 克隆示例代碼
git clone https://github.com/electron/electron-quick-start
# 進入項目目錄
cd electron-quick-start
# 下載項目需要的依賴
cnpm install
# 安裝 electron 
cnpm install electron --save-dev
# 安裝 packager 包依賴
cnpm install electron-packager --save-dev
# 運行一下 Demo 看看是否可以成功
cnpm run start

2.打包自己的 vue 項目

到自己已經(jīng)寫好的vue項目中，輸入打包命令

npm run build

3.將vue項目整合到示例代碼中打包exe

<1>將打包好的 dist 文件夾復制到示例代碼 electron-quick-start 根目錄

目錄結(jié)構(gòu)如下：

<2>修改main.js文件

ps：

index.html 修改為 ./dist/index.html

<3>刪除 electron-quick-start 示例本身的 index.html 【這個沒用了，可以刪了】

<4>修改package.json文件

此處 scripts 字典替換成如下代碼

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

<5>打包exe

npm run packager

執(zhí)行文件在項目根目錄下的 App-win32-x64 文件夾中，叫 App.exe

雙擊執(zhí)行，效果如下

ps：

如果執(zhí)行打包命令時下載文件很慢，那就執(zhí)行這條命令，把 ELECTRON 下載的地址切換為淘寶的鏡像

npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/

總結(jié)

到此這篇關(guān)于使用electron將vue項目打包成exe的文章就介紹到這了,更多相關(guān)electron將vue項目打包exe內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論