vue项目引入Electron

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue项目引入Electron，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3877字，纯文字阅读大概需要6分钟。

内容图文

一.安装 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

内容总结

以上是互联网集市为您收集整理的vue项目引入Electron全部内容，希望文章能够帮你解决vue项目引入Electron所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---