一.安装 Electron
npm i --save-dev electron
二.创建主脚本文件
主脚本指定了运行主进程的 Electron 应用程序的入口(就我们而言,是 main.js 文件)。 通常,在主进程中运行的脚本控制应用程序的生命周期、显示图形用户界面及其元素、执行本机操作系统交互以及在网页中创建渲染进程。 Electron 应用程序只能有一个主进程。
主脚本可以如下所示:
/* jshint esversion: 6 */
const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow
// const newWindowBtn = document.getElementById('frameless-window')
const path = require('path')
const url = require('url')
// 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 mainWindow
function createWindow() {
// 创建一个窗口,大小 800 * 600
mainWindow = new BrowserWindow({
width: 800,
height: 600
})
// 在窗口内要展示的内容为 ./dist/index.html,即打包生成的index.html
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, './dist', 'index.html'),
protocol: 'file:',
slashes: true
}))
// 自动打开调试台
mainWindow.webContents.openDevTools({
detach: true
})
// Open the DevTools.
// mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
mainWindow.on('closed', function() {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
// 回收BrowserWindow对象
mainWindow = null
})
}
// 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', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function() {
// On OS X 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', function() {
// On OS X 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 (mainWindow === null) {
createWindow()
}
})
// 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.
三.修改您的 package.json 文件
您的 Electron 应用程序使用 package.json 文件作为主入口(像任何其它的 Node.js 应用程序)。 您的应用程序的主脚本是 main.js,所以相应修改 package.json 文件:
{
"name": "my-electron-app",
"version": "0.1.0",
"author": "your name",
"description": "My Electron app",
"main": "main.js"
}
注意:如果未设置 main 字段,Electron 将尝试加载包含在 package.json 文件目录中的 index.js 文件。
注意:author 和 description 字段对于打包来说是必要的,否则运行 npm run make 命令时会报错。
默认情况下, npm start 命令将用 Node.js 来运行主脚本。 要使用 Electron 来运行脚本,您需要将其更改为这样:
{
"name": "my-electron-app",
"version": "0.1.0",
"author": "your name",
"description": "My Electron app",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}
四.打包项目
npm run build
打包问题:
1.问题原因:
大部分vue 前段项目 会使用 js-cookie 这个库 来操作浏览器的cookie
然而这个库 在electron下 会无法使用 (最坑的是还没报错)
从而导致 登录成功以后 写cookie 读cookie的操作 全部失败
自然而然 登录无法跳转了
解决方案:
不使用该库 使用localStorage就行了吗
const TokenKey = 'Admin-Token'
// if (process.env.NODE_ENV === 'production') {
// store = new Store()
// }
export function getToken() {
return localStorage.getItem(TokenKey)
}
export function setToken(token) {
return localStorage.setItem(TokenKey, token)
}
export function removeToken() {
// if (process.env.NODE_ENV === 'production') {
// return store.delete(TokenKey)
// }
return localStorage.removeItem(TokenKey)
}
2.打开打包文件白板
修改vue.config文件下的publicPath
## 五.运行您的应用程序
npm start