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

一、前言

  项目本来打算采用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"

运行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

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

原文地址:https://www.cnblogs.com/xufeikko/p/10559444.html

时间: 2024-10-13 03:40:24

将现有vue项目基于electron打包成桌面应用程序的相关文章

java项目使用exe4j打包成exe文件

java项目使用exe4j打包成exe文件 前言:我们都知道java是平台无关性,可以打包成jar文件,到任何操作系统有jre环境的电脑都可以允许!但是我们打包成exe文件就相当于舍弃了这一大优势,不过确实有需要打包成exe的时候吧!下面介绍方法给大家,将java程序打包成exe可运行文件! 准备工具: eclipse.exe4j(exe4j的下载地址:http://www.pc6.com/softview/SoftView_68764.html#download  如安装遇到问题,请参见:ht

VS2010把项目发布、打包成可安装部署的应用程序

本文要解决的问题: 详细介绍用VS2010将项目发布.打包成可部署的应用程序的过程,通过一步步操作,最后能顺利完成. 1. 在vs2010 选择"新建项目"à" 其他项目类型"à" Visual Studio Installerà "安装项目": 命名为:Setup1 . 这是在VS2010中将有三个文件夹, 1."应用程序文件夹"表示要安装的应用程序需要添加的文件: 2."用户的'程序'菜单"表

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

前言 最近想把自己用html+css+js做的网页界面打包成桌面应用,网上一搜,发现Electron是一个不错的选择,试了试,发现效果真的不错.这里记录一下打包过程以作记录,便于自己以后查看学习. 一.简介 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的. 二.打包过程 1.

JavaSE应用程序打包成可运行程序

JavaSE应用程序打包成可运行程序 所需软件 - MyEclipse或Eclipse(如会打包命令,此软件可省略) - exe4j 实现过程: 1.使用MyEclipse进行程序打包. - 选中项目右键 Export... 选中 JAR File...点击next 选择输出文件位置. 选择下一步取消勾选Export classs files with compile errors 选择下一步,选择包含main方法的类,之后点击finish就生成jar包了 2.生成windows下可运行的程序(

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

node-webkit是一个Chromium和node.js上的结合体,通过它我们可以把建立在chrome浏览器和node.js上的web应用打包成桌面应用,而且还可以跨平台的哦.很显然比起传统的桌面应用,在某些特定领域用html5+css3+js开发的web应用更加简单和高效,而且还可以使用node.js的功能,所以node-webkit还是很有用处的. 下面我通过一个简单的demo来介绍怎么样把一个web应用打包成一个可执行文件(这里只介绍windows环境) 首先新建一个index.htm

展示触摸屏网页打包成桌面应用(nw.js)

一.编写触摸屏网页注意点 1.控制缩放行为.内容宽度为屏幕宽度,初始缩放比例为1:1,并禁止缩放(如若可放大缩小,影响操作体验) <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 2.<a>标签点击存在暗色透明背景问题,使用css属性 -webkit-tap-highlight-colo

打包JavaFX11桌面应用程序

打包JavaFX11桌面应用程序 这是JavaFX系列的第二弹,第一弹在这里 在第一弹中,我们使用的是OpenJDK8,但是OpenJDK8和Oracle Java JDK不一样,它没有内置JavaFX模块,需要自己引入,而使用Oracle版的JDK直接import就好了.但是到了java11的时候无论是OpenJDK还是Oracle版都已经把JavaFX剥离开来了,javaFX现在由OpenJFX项目维护和更新. 第一弹中我使用的是OpenJDK8,后来想想,还是要顺应时代发展潮流,所以在这里

VUE项目用hbuilder 打包为手机APP

一.测试项目是否可以正确运行    指令:npm run dev 首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目 不必非得是像我这样的,这一步的目的只是测试一下咱们的vue项目是否可以运行 二.修改路径(assetsPublicPath: './') 打开我们config中的js文件,修改assetsPublicPath的路径为"./"(下图的右下角位置) 三.打包文件  指令:npm run build 打包后会生成dist文件 四.把dist文件变

前端打包成桌面应用、以及chrome扩展

前段时间在利用工作之余开发了tomato timer这个蕃茄钟,然后部署到github.io上,由于greatway太厉害,偶尔会有打不开的情况.上周末对比做了扩展和改进,使其成为chrome的插件,或者成为桌面app. chrome插件的使用与开发 一.如何安装与使用: 1.下载tomato timer项目,github地址 https://github.com/cqhaibin/tomato-timer.git 2.切换到V2.0.0.0的tag,然后如下图所配置: 3.然后单击 “小飞”图