1.创建vue脚手架项目;(话不多说 就是你要想打包的项目)
2:配置cnpm; npm install -g cnpm --registry=https://registry.npm.taobao.org;
3:vue add electron-builder 安装vue2 支持的 electron及打包依赖 (注意:如果没有用淘宝镜像,这里会很慢)
4:安装完成会自动在src下创建一个文件background.js(也就是主入口文件,如果没有就自行创建,配置很多,基础如下,果然也有文件请忽略,绝大多数都是会自行创建的)
'use strict' import { app, protocol, BrowserWindow, Menu, dialog, ipcMain} from 'electron' import { createProtocol, installVueDevtools } from 'vue-cli-plugin-electron-builder/lib' // Menu.setApplicationMenu(null) const isDevelopment = process.env.NODE_ENV === 'production' // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the JavaScript object is garbage collected. let win // Scheme must be registered before the app is ready protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }]) function createWindow () { // Create the browser window. win = new BrowserWindow({ show:false, webPreferences: { nodeIntegration: true, enableRemoteModule: true, webSecurity: false } }) if (process.env.WEBPACK_DEV_SERVER_URL) { // Load the url of the dev server if in development mode // win.loadURL(process.env.WEBPACK_DEV_SERVER_URL) win.loadURL(process.env.WEBPACK_DEV_SERVER_URL+"projectA") if (!process.env.IS_TEST) win.webContents.openDevTools() } else { createProtocol('app') // Load the index.html when not in development win.loadURL('app://./index.html') // win.loadURL('./resources/index.html') } win.maximize() win.show(); win.on("close", (e) => { e.preventDefault() dialog.showMessageBox({ type:'info', title: '提示', message:"要记得保存文件哦,您确定要关闭吗", buttons:['ok',"cancel"], }) .then(data => { if (data.response == 0) { app.exit() } }) }) // 通讯 ipcMain.on('asynchronous-message', (event, arg) => { event.sender.send('asynchronous-reply', process.argv[1]) }) win.on('closed', () => { win = null }) } // Quit when all windows are closed. app.on('window-all-closed', () => { // On macOS it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform !== 'darwin') { app.quit() } }) // console.log("process.argv",process.argv) 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 (win === null) { createWindow() } }) // 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.on('ready', async () => { createWindow() }) // Exit cleanly on request from parent process in development mode. if (isDevelopment) { if (process.platform === 'win32') { process.on('message', data => { if (data === 'graceful-exit') { app.quit() } }) } else { process.on('SIGTERM', () => { app.quit() }) } }
5:在package.json下配置入口启动文件名和启动命令:如下 (1-6)
{ "name": "demo", "version": "0.1.0", "private": true, "scripts": { "start":"npm run electron:serve", // 1 "electron:build": "vue-cli-service electron:build", // 2 "electron:serve": "vue-cli-service electron:serve", // 3 "postinstall": "electron-builder install-app-deps", // 4 "postuninstall": "electron-builder install-app-deps", // 5 "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.6.5", "vue": "^2.6.11", "vue-router": "^3.2.0", "vuex": "^3.4.0" }, "main": "background.js",// 6 "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-service": "~4.5.0", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", "sass": "^1.26.5", "sass-loader": "^8.0.2", "vue-cli-plugin-electron-builder": "~2.0.0-rc.5", "vue-template-compiler": "^2.6.11" } }
7:npm start 搞定收工,你的热更新electron程序就启动啦,打包方式千万种,但这是最简单的 也是热更新的开发版本配置