下面的步骤是我事后整理的，还需要第二个项目进行验证，才能知道是否完整。
1.npm install electron --save-dev
2.npm install electron-builder
3.设置图标的：npm install electron-icon-builder
3.打开env.development文件 修改：VUE_APP_BASE_API = '线上地址/prod-api'
4.在package.json里面的script节点之前插入：main: "background.js"。
5.在src文件夹下建立background.js，内容如下：
'use strict'import { app, protocol, BrowserWindow, ipcMain, Menu} from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
import path from 'path'
const isDevelopment = process.env.NODE_ENV !== 'production'
const Store = require('electron-store');
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
{ scheme: 'app', privileges: { secure: true, standard: true } }
])
async function createWindow() {
Menu.setApplicationMenu(null) // null值取消顶部菜单栏
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
// Use pluginOptions.nodeIntegration, leave this alone
// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
contextIsolation:false, //上下文隔离
enableRemoteModule: true, //启用远程模块
nodeIntegration: true, //开启自带node环境
webviewTag: true, //开启webview
webSecurity: false,
allowDisplayingInsecureContent: true,
allowRunningInsecureContent: true
}
})
win.maximize()
win.show()
win.webContents.openDevTools()
ipcMain.on('getPrinterList', (event) => {
//主线程获取打印机列表
win.webContents.getPrintersAsync().then(data=>{
win.webContents.send('getPrinterList', data);
});
//通过webContents发送事件到渲染线程，同时将打印机列表也传过去
});
if (process.env.WEBPACK_DEV_SERVER_URL) {
// Load the url of the dev server if in development mode
await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
if (!process.env.IS_TEST) win.webContents.openDevTools()
} else {
createProtocol('app')
// Load the index.html when not in development
win.loadURL('app://./index.html')
}
}
// 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()
}
})
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()
})
// 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 () => {
Store.initRenderer();
if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
try {
await installExtension(VUEJS_DEVTOOLS)
} catch (e) {
console.error('Vue Devtools failed to install:', e.toString())
}
}
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()
})
}
}
6.在package.json里面的script节点插入：
"electron:serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service electron:serve","electron:build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service electron:build",
"electron:build:win32": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service electron:build --win --ia32",
"electron:generate-icons": "electron-icon-builder --input=./src/assets/logo/logo.png --output=build --flatten"
进行打包 npm run electron:build // 打包命令
打包成功后会在dist_electron中生成了exe文件，点击安装即可。
7.执行命令：
产生icon文件夹：npm run electron:generate-icons
打包生成： npm run electron:build
最后：./src/assets/logo/logo.png的图片最好是1024，要不然生成后的图标，可能在exe程序上显示不全。
标签：桌面,process,win,app,electron,若依,--,Electron,true From： https://www.cnblogs.com/sheizhuchenfu2/p/17493729.html