将web封装为桌面程序。
参考：https://segmentfault.com/a/1190000011971612

环境准备

  1. npm install electron -g

简单处理：复制dist

  1. # 官网已经有 electron-quick-start 仓库克隆下来
  2. git clone https://github.com/electron/electron-quick-start
  3. # 进入文件夹
  4. cd electron-quick-start
  5. # 安装依赖包并运行
  6. npm install && npm start

修改vue打包配置，这个必须

image.png

复制dist到刚下载的electron项目即可。

实际应用：vue 中引入electron

  1. npm install electron --save-dev 
  2. npm install electron-packager --save-dev //这个是打成exe文件的插件，之后要用，提前下载好

vue的build文件中，新建electron.js。

  1. // Modules to control application life and create native browser window
  2. const {app, BrowserWindow} = require('electron')
  3. const path = require('path')
  4. const url = require('url');
  6. // Keep a global reference of the window object, if you don't, the window will
  7. // be closed automatically when the JavaScript object is garbage collected.
  8. let mainWindow
  10. function createWindow () {
  11.   // Create the browser window.
  12.   mainWindow = new BrowserWindow({
  13.     width: 800,
  14.     height: 600,
  15.     webPreferences: {
  16.       preload: path.join(__dirname, 'preload.js')
  17.     }
  18.   })
  20.   // and load the index.html of the app.
  21.   // mainWindow.loadFile('index.html')
  23.   mainWindow.loadURL(url.format({
  24.     pathname: path.join(__dirname, '../dist/index.html'),
  25.     protocol: 'file:',
  26.     slashes: true
  27.   }))
  29.   // Open the DevTools.
  30.   mainWindow.webContents.openDevTools()
  32.   // Emitted when the window is closed.
  33.   mainWindow.on('closed', function () {
  34.     // Dereference the window object, usually you would store windows
  35.     // in an array if your app supports multi windows, this is the time
  36.     // when you should delete the corresponding element.
  37.     mainWindow = null
  38.   })
  39. }
  41. // This method will be called when Electron has finished
  42. // initialization and is ready to create browser windows.
  43. // Some APIs can only be used after this event occurs.
  44. app.on('ready', createWindow)
  46. // Quit when all windows are closed.
  47. app.on('window-all-closed', function () {
  48.   // On macOS it is common for applications and their menu bar
  49.   // to stay active until the user quits explicitly with Cmd + Q
  50.   if (process.platform !== 'darwin') app.quit()
  51. })
  53. app.on('activate', function () {
  54.   // On macOS it's common to re-create a window in the app when the
  55.   // dock icon is clicked and there are no other windows open.
  56.   if (mainWindow === null) createWindow()
  57. })
  59. // In this file you can include the rest of your app's specific main process
  60. // code. You can also put them in separate files and require them here.

添加

  1. "electron_dev": "npm run build && electron build/electron.js",
  2. "electron_build": "electron-packager ./dist/ --platform=win32 --arch=x64 --icon=./src/assets/favicon.ico --overwrite"

可以运行electron_dev 测试

然后build

手动在dist文件夹下增加electron.js和package.json。将文件位置修改为index.html