将vue3项目打包成exe文件方法

一、安装

1.安装electron

npm install electron --save-devnpm install electron-builder --save-dev

2.在vue项目根目录新建文件index.js

// index.js// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')const createWindow = () => {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true}})// and load the index.html of the app.mainWindow.loadFile('./dist/index.html')// Open the DevTools.// mainWindow.webContents.openDevTools()
}// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {createWindow()app.on('activate', () => {// On macOS it's common to re-create a window in the app when the// dock icon is clicked and there are no other windows open.if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

3.package.json文件编辑

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","electron:build": "vue-cli-service build && electron-builder","electron:serve": "electron ."},"build": {"productName": "这里是你的项目名","appId": "com.example.这里是appId","win": {"icon": "favicon.ico","target": ["nsis", "appx"]},"directories": {"output": "build"},"files": ["dist/**/*","index.js"//这里是刚才建的index.js]},

4.测试
 

npm run electron:serve

5.打包

npm run electron:build

二、报错解决

 解决：打开cmd 执行 npm config edit

npm config edit

 打开配置文件 粘贴以下内容

registry=https://registry.npm.taobao.org/
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjs
electron_mirror=https://npm.taobao.org/mirrors/electron/
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/