一、前言

  项目本来打算采用B/S架构去做的,浏览器网址方式打开还是让用户不方便;

二、使用electron集成桌面应用

  本身项目是使用vue-cli开发的,在使用electron之前,需要将本身的项目打包好后打开index.html能显示网页.因为刚接触便直接拿官方demo进行打包了.

  1.克隆官方demo:git clone https://github.com/electron/electron-quick-start

  2.cd electron-quick-start->npm install->npm start   到这就能运行demo了

  3.将自己项目打包好的dist文件中的index.html和static文件放入electron-quick-start(跟目录)文件中,重新start一下,运行结果如图

4.在package.json中增加如下代码

"pack":"electron-packager . 'health-terminal' --platform=win32 --arch=x64  --out=./out --asar --app-version=0.0.1"

安装打包插件

cnpm install electron --save-dev //安装electron
cnpm install electron-packager --save-dev //这个是打成exe文件的插件,之后要用,提前下载好

运行npm run pack 打包成功

npm run pack

文件结构

5.在electron中进行网络请求时需注意,因为本身项目使用了反向代理,打包后请求路径前面会增加本地路径“file:e/”,解决方式:

  在config-dev.env.js(测试环境)和pro-env.js(正式环境)添加API_ROOT:'192.168.0.0:8080'(根据自己的需要修改)

新建一个js文件导出process.env.API_ROOT;

最后在main.js中引用

请求路径前加上this.root

至此一个桌面应用已经打包完成

以下是界面配置

在main.js 当中通过配置 BrowserWindow 来改变外观

width Integer - 窗口宽度,单位像素. 默认是 800 .

height Integer - 窗口高度,单位像素. 默认是 600 .

x Integer - 窗口相对于屏幕的左偏移位置.默认居中. y Integer - 窗口相对于屏幕的顶部偏移位置.默认居中. useContentSize Boolean - width 和 height 使用web网页size, 这意味着实际窗口的size应该包括窗口框架的 size,稍微会大一点,默认为 false . center

Boolean - 窗口屏幕居中. minWidth Integer - 窗口最小宽度,默认为 0 .

minHeight Integer - 窗口最小高度,默认为 0 .

maxWidth Integer - 窗口最大宽度,默认无限制.

maxHeight Integer - 窗口最大高度,默认无限制.

resizable Boolean - 是否可以改变窗口size,默认为 true .

movable Boolean - 窗口是否可以拖动. 在 Linux 上无效. 默认为 true .

minimizable Boolean - 窗口是否可以最小化. 在 Linux 上无效. 默认为 true .

maximizable Boolean - 窗口是否可以最大化. 在 Linux 上无效. 默认为 true .

closable Boolean - 窗口是否可以关闭. 在 Linux上无效. 默认为 true .

alwaysOnTop Boolean - 窗口是否总是显示在其他窗口之前. 在 Linux上无效. 默认为 false .

fullscreen Boolean - 窗口是否可以全屏幕. 当明确设置值为When false ,全屏化按钮将会隐藏,在 macOS 将禁用. 默认 false .

fullscreenable Boolean - 在 macOS 上,全屏化按钮是否可用,默认为 true . skipTaskbar Boolean - 是否在任务栏中显示窗口. 默认是 false .

kiosk Boolean - kiosk 方式. 默认为 false . title String - 窗口默认title. 默认 "Electron" .

icon NativeImage - 窗口图标, 如果不设置,窗口将使用可用的默认图标.

show Boolean - 窗口创建的时候是否显示. 默认为 true .

frame Boolean - 指定 false 来创建一个 Frameless Window. 默认为 true .

acceptFirstMouse Boolean - 是否允许单击web view来激活窗口 . 默认为 false .

disableAutoHideCursor Boolean - 当 typing 时是否隐藏鼠标.默认 false .

autoHideMenuBar Boolean - 除非点击 Alt ,否则隐藏菜单栏.默认为 false .

enableLargerThanScreen Boolean - 是否允许允许改变窗口大小大于屏幕. 默认是 false .

backgroundColor String -窗口的 background color 值为十六进制,如 #66CD00 或 #FFF 或 #80FFFFFF (支持透明 度). 默认为在 Linux和 Windows 上为 #000 (黑色) , Mac上为 #FFF (或透明).

hasShadow Boolean - 窗口是否有阴影. 只在 macOS 上有效. 默认为 true .

darkTheme Boolean - 为窗口使用 dark 主题, 只在一些拥有 GTK+3 桌面环境上有效. 默认为 false .

transparent Boolean - 窗口 透明. 默认为 false .

type String - 窗口type, 默认普通窗口. 下面查看更多. titleBarStyle String - 窗口标题栏样式. 下面查看更多.

webPreferences Object - 设置界面特性. 下面查看更多.
 

electron中默认带有顶部菜单栏,有时候我们的应用不需要。

再main.js文件中设置

const electron = require('electron')

const path = require('path')
const url = require('url') let mainWindow
const Menu = electron.Menu
function createWindow () {

 // 隐藏菜单栏
  Menu.setApplicationMenu(null)
// Create the browser window.设置窗口宽高,最小宽高,图标等
mainWindow = new BrowserWindow({ width: 800, height: 600, minWidth: 1280, minHeight: 800, resizable: false, allowRunningInsecureContent: true, experimentalCanvasFeatures: true, icon: './favicon.ico'})
mainWindow.loadURL("http://www.nlfit.cn/saas/index.html#/login") mainWindow.on('closed', function () {
mainWindow = null
})
}
const electron = require('electron')
// 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.
// const app = electron.app
// const BrowserWindow = electron.BrowserWindow
const path = require('path')
const url = require('url')
let mainWindow
const Menu = electron.Menu
function createWindow () {
Menu.setApplicationMenu(null)
// Create the browser window.
mainWindow = new BrowserWindow({ width: 800, height: 600,
minWidth: 1280, minHeight: 800, resizable: false,
allowRunningInsecureContent: true, experimentalCanvasFeatures: true,
icon: './favicon.ico'})
// and load the index.html of the app.
mainWindow.loadURL("http://www.nlfit.cn/saas/index.html#/login")
// 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.
mainWindow = null
})
}

electron中默认带有顶部菜单栏,有时候我们的应用不需要。

再main.js文件中设置

const electron = require('electron')

const path = require('path')
const url = require('url') let mainWindow
const Menu = electron.Menu
function createWindow () {

 // 隐藏菜单栏
  Menu.setApplicationMenu(null)
// Create the browser window.设置窗口宽高,最小宽高,图标等
mainWindow = new BrowserWindow({ width: 800, height: 600, minWidth: 1280, minHeight: 800, resizable: false, allowRunningInsecureContent: true, experimentalCanvasFeatures: true, icon: './favicon.ico'})
mainWindow.loadURL("http://www.nlfit.cn/saas/index.html#/login") mainWindow.on('closed', function () {
mainWindow = null
})
}
const electron = require('electron')
// 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.
// const app = electron.app
// const BrowserWindow = electron.BrowserWindow
const path = require('path')
const url = require('url')
let mainWindow
const Menu = electron.Menu
function createWindow () {
Menu.setApplicationMenu(null)
// Create the browser window.
mainWindow = new BrowserWindow({ width: 800, height: 600,
minWidth: 1280, minHeight: 800, resizable: false,
allowRunningInsecureContent: true, experimentalCanvasFeatures: true,
icon: './favicon.ico'})
// and load the index.html of the app.
mainWindow.loadURL("http://www.nlfit.cn/saas/index.html#/login")
// 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.
mainWindow = null
})
}

将现有vue项目基于electron打包成桌面应用程序 如何隐藏electron窗体的菜单栏的更多相关文章

  1. 将现有vue项目基于electron打包成桌面应用程序

    一.前言 项目本来打算采用B/S架构去做的,浏览器网址方式打开还是让用户不方便: 二.使用electron集成桌面应用 本身项目是使用vue-cli开发的,在使用electron之前,需要将本身的项目 ...

  2. electron打包成桌面应用程序的详细介绍

    1.前提条件 a. 安装了node b.安装了electron c.你知道自己写的东西(js,css,html等等)放在那个文件夹(假设这个文件夹命名为 app,下面会用到)中 2.安装electro ...

  3. vue项目利用apicloud打包成apk过程

    最近公司要求我们用apicloud做一个app,正好利用这个机会学习下app的制作过程~ 页面的开发过程跟我们平时开发一样,利用vue把页面全部完成,最后进行npm run build将项目打包. 接 ...

  4. electron 打包成桌面运用

    最近在学习nodejs,得知Electron是通过将Chromium和Node.js合并到同一个运行时环境中,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一门技术.对于之前一直从 ...

  5. vue项目再HBuilder打包成app后,有ui模块未添加的弹窗

    直接在打包后的mainifst.json的文件夹中加入标注部分,我是这样解决了的

  6. electron将网站打包成桌面应用

    需求同 NW.js将网站打包成桌面应用 1. 从github上克隆electron示例项目 git clone https://github.com/electron/electron-quick-s ...

  7. Electron把网页打包成桌面应用并进行源码加密

    前言 最近想把自己用html+css+js做的网页界面打包成桌面应用,网上一搜,发现Electron是一个不错的选择,试了试,发现效果真的不错.这里记录一下打包过程以作记录,便于自己以后查看学习. 一 ...

  8. 不用终端运行 Vue项目 基于Pycharm

    不用终端运行 Vue项目 基于Pycharm 如下图展示 接下来 然后单击右上角运行 即可完成运行

  9. nodejs打包成桌面程序(exe)的进阶之路

    nodejs打包成桌面程序(exe)的进阶之路 node js bat 前端 计划任务 前言:最近的研究,请大佬们细品 第一篇 - 任务计划程序篇 说真的研究到将nodejs打包成可执行的exe文件是 ...

  10. 用node-webkit把web应用打包成桌面应用

    node-webkit是一个Chromium和node.js上的结合体,通过它我们可以把建立在chrome浏览器和node.js上的web应用打包成桌面应用,而且还可以跨平台的哦.很显然比起传统的桌面 ...

随机推荐

  1. JavaScript:七大基础数据类型:数值number及其表示范围

    数值number类型,用来表示任何类型的数字:整数或者浮点数都可以: 实际上,JS中的数值,是一个64位的浮点数,这与Java中的double类型的浮点数是一致的: 但是它有表示的范围,在范围内,JS ...

  2. 对一个序列双重argsort的含义

    学习笔记:由numpy.argsort()引发的思考 一.numpy.argsort() 函数定义 函数的定义 首先函数的定义比较简洁: argsort()函数是将x中的元素从小到大排列,提取其对应的 ...

  3. Python实验报告(第5章)

    实验5:字符串及正则表达式 一.实验目的和要求 学会使用字符串的常用操作方法和正确应用正则表达式 二.实验环境 软件版本:Python 3.10 64_bit 三.实验过程 1.实例01:使用字符串拼 ...

  4. [常用工具] OpenCV_contrib库在windows下编译使用指南

    本文主要讲述opencv及opencv_contrib库在windows下基于vs2017编译安装指南.所用OpenCV版本为OpenCV4.4,编译平台为vs2017. 文章目录 1 下载 2 编译 ...

  5. linux基础:1、linux简介、虚拟化软件的安装与配置、Xshell的安装与配置

    Linux 目录 Linux 一.linux简介 二.linux发展史 三.虚拟化技术 1.简介 2.虚拟化软件下载 3.重要名词解释 4.远程链接工具 一.linux简介 常见岗位 1.自动化运维 ...

  6. 可持久化杀手——rope学习笔记

    概述 std::rope,内部一说是可持久化平衡树,一说是块状链表. 它可以实现很多可持久化数组问题. 基本使用 #include<bits/extc++.h> using namespa ...

  7. Xversion 在 macOS12.4

    很多同学发现在macOS12.4上已经不用使用cornerstone 4的svn了 针对macOS12.4,Xversion照样能使用 但是有些时候我们需要提交.a文件,Xversion中又看不到,针 ...

  8. 【ASP.NET Core】按用户角色授权

    上次老周和大伙伴们分享了有关按用户Level授权的技巧,本文咱们聊聊以用户角色来授权的事. 按用户角色授权其实更好弄,毕竟这个功能是内部集成的,多数场景下我们不需要扩展,不用自己写处理代码.从功能语义 ...

  9. 1.【窗口组件】小部件-QWidgt

    一.前言 QWidget翻译过来是小部件的意思,QWidgt 类是所有用户界面对象的基类. 窗口部件是用户界面的一个基本单元:它从窗 口系统接收鼠标.键盘和其它事件,并且在屏幕上绘制自己.每一个窗口部 ...

  10. C#动态创建对象过程

    创建对象环境 获取当前应用程序集引用的类库详细信息,动态类也将调用此类库 obj类为项目动态编译时用到的模版类,主要提取其using信息用于动态生成的类使用     1 AssemblyName[]r ...