實(shí)現(xiàn)思路：從electron官網(wǎng)上拉取代碼，把官網(wǎng)上拉取下來項目中的index.html替換成 自己vue項目打包好的dist文件中的index.html，輸入打包exe的命令即可；
- 拉取electron官網(wǎng)上的demo，拉下來之后安裝依賴，項目跑起來之后，就不用管demo了，開始配置自己的Vue項目
git clone https://github.com/electron/electron-quick-start
npm i
npm run start
- 修改自己項目的
vue.config.js，路徑必須修改為./，不是這個后續(xù)打包好的頁面可能會出現(xiàn)白屏，加載不出來的情況
module.exports = {
publicPath: './',
}
- 打包自己的Vue項目
npm run build
- 將打包出來的 dist 文件夾復(fù)制到之前拉取的 electron-quick-start 文件夾中，和
node_modules同級就行
- 然后自己的項目就不用管了，剩下的就交給拉下來的 electron-quick-start 項目
- 在 electron-quick-start 項目中，下載打包需要的依賴
electron-packager
npm install electron-packager --save-dev
進(jìn)入 electron-quick-start 項目，刪除項目根目錄下的
index.html文件在 electron-quick-start 項目中找到入口文件
main.js，修改打包的文件路徑為我們的index.html（替換成我們的文件非常非常的重要，注意行數(shù)，一般都在16行多一點(diǎn)）
// main.js 原始內(nèi)容
mainWindow.loadFile('index.html')
// 修改后的內(nèi)容
mainWindow.loadFile('./dist/index.html')
- 在 electron-quick-start 項目中，進(jìn)入
package.json，在 scripts 中添加packager指令，如下所示：
"scripts": {
"start": "electron .",
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"
}
- 運(yùn)行命令打包，然后項目中會出現(xiàn)一個 App-win32-x64 的文件夾，這個文件就是打包好的桌面應(yīng)用，文件夾里有一個 App.exe 文件，App.exe就是這個項目的啟動文件
npm run packager
打包完以后，項目中會出現(xiàn) App-win32-x64 文件夾，進(jìn)去之后，雙擊App.exe就可以訪問了；
image.png
- 打包時會出現(xiàn)node版本不匹配問題，升級node版本到14.17.5
node -v
nvm list
nvm install 14.17.5
nvm list
nvm use 14.17.5
nvm alias default 14.17.5 // 修改默認(rèn)的node版本，否則vsCode中的node版本會不一樣
打包時mac會報沒有windows包的問題
- image.png
