将vue项目通过electron打包成windows可执行程序

将vue项目打包成windows可执行程序

1、准备好dist将整个项目打包

bash 复制代码
npm run build

2、安装electron依赖

bash 复制代码
npm install electron --save-dev
npm install electron-packager --save-dev
bash 复制代码
"electron": "^13.1.4",
"electron-packager": "^15.2.0"

在dist文件夹下面创建electron.js
electron.js内容如下:

bash 复制代码
const electron = require('electron')
const path = require('path')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
const globalShortcut = electron.globalShortcut //快捷键

let mainWindow
const Menu = electron.Menu

function createWindow () {
 
    Menu.setApplicationMenu(null)
    // Create the browser window.
    mainWindow = new BrowserWindow({
        width: 980,
        height: 640
    })
 
    // and load the index.html of the app.
    mainWindow.loadFile('index.html')
 
    // Open the DevTools.
    // mainWindow.webContents.openDevTools()
 
    // Emitted when the window is closed.
    mainWindow.on('closed', function () {
        mainWindow = null
    })
 
    // 通过快捷键就可以打开调试模式 ctrl + shift + l
    globalShortcut.register('CommandOrControl+Shift+L', () => {
        let focusWin = BrowserWindow.getFocusedWindow()
        focusWin && focusWin.toggleDevTools()
    })
}

app.on('ready', createWindow)
 
// Quit when all windows are closed.
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
})
 
app.on('activate', function () {
    if (mainWindow === null) createWindow()
})

在dist文件夹下面添加package.json文件内容如下:

bash 复制代码
{
    "name": "china_new1",
    "version": "2.0.0",
    "description": "A minimal Electron application",
    "main": "electron.js",
    "scripts": {
      "start": "electron ."
    },
    "repository": "https://github.com/electron/electron-quick-start",
    "keywords": [
      "Electron",
      "quick",
      "start",
      "tutorial",
      "demo"
    ],
    "author": "GitHub",
    "license": "CC0-1.0",
    "devDependencies": {
      "electron": "^6.0.12"
    }
  }

整个文件夹格式如下:

在跟目录添加命令

bash 复制代码
"electron_build": "electron-packager ./dist --platform=win32 --arch=x64 --overwrite"

执行打包命令

bash 复制代码
cnpm run electron_build

等待打包结果,打包出来为一下截图即为打包成功,双击china_new1.exe运行项目。

相关推荐
用户516816614584114 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦14 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He14 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ19 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊19 小时前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码20 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
Gracemark2 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼2 天前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_2 天前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing2 天前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化