使用electron将vue-cli项目打包成exe的方法

如果你已经做好了一个vue的项目，并且想要将他打包成exe,那么请继续阅读。

首先你可以下载一个demo了解一下。

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start

这个demo主要就是main.js和package.json

打开main.js

const {app, BrowserWindow} = require('electron')
let mainWindow
function createWindow () {
 // Create the browser window.
 mainWindow = new BrowserWindow({width: 800, height: 600})//创建一个浏览器窗口，可配置宽高
 // and load the index.html of the app.
 mainWindow.loadFile('index.html')//加载html
 // Open the DevTools.
 // mainWindow.webContents.openDevTools()//打开调试窗口
 mainWindow.on('closed', function () {
 mainWindow = null
 })
}

app.on('ready', createWindow)
app.on('window-all-closed', function () {
 if (process.platform !== 'darwin') {
 app.quit()
 }
})
app.on('activate', function () {
 if (mainWindow === null) {
 createWindow()
 }
})

package.json

{
 "name": "electron-quick-start",
 "version": "1.0.0",
 "description": "A minimal Electron application",
 "main": "main.js",//入口，根据自己的项目修改
 "scripts": {
 "start": "electron ."
 },
 "repository": "https://github.com/electron/electron-quick-start",
 "keywords": [
 "Electron",
 "quick",
 "start",
 "tutorial",
 "demo"
 ],
 "author": "GitHub",
 "license": "CC0-1.0",
 "devDependencies": {
 "electron": "^2.0.0"
 }
}

运行 npm start

显示窗口

ok,现在我们在自己的项目上安装两个依赖

npm install electron --save-dev
npm install electron-packager --save-dev

electron有两种打包方式，electron-packager和electron-builder,官方推荐electron-builder,但是较为麻烦，初学者建议先用

electron-packager

首先将例子中的main.js复制一份并重命名为electron

修改为 mainWindow.loadFile(‘./dist/index.html')

然后对你的项目进行打包，npm run build

打包完成后，将electron.js 在复制一份到dist目录下，修改mainWindow.loadFile(‘index.html')

将项目根目录下的package.json修改

如同以下

"main": "build/electron.js",//入口
 "scripts": {
 "dev": "node build/dev-server.js",
 "start": "npm run dev",
 "build": "node build/build.js",
 "test": "electron .",
 "electron_build": "electron-packager ./dist exeName --platform=win32 --arch=x64 --icon=./assets/img/favicon.ico --overwrite"
 },

复制package.json到dist目录下，修改

 "main": "electron.js",1

运行npm test 打开项目

运行npm run electron_build 进行打包，exe图标必须有,格式是ico，exeName是exe的名称，根据自己需要配置

为什么要在dist目录加上electron.js和package.json呢？这是因为内部机制会找到index.html下package.json进行打包

以上这篇使用electron将vue-cli项目打包成exe的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue-cli项目webpack打包后iconfont文件路径的问题

    在使用vue-cli创建vue项目时,可以自动生成webpack文件.使用 npm run build 即可打包发布生产文件,打包后的文件 webpack配置 可以看到使用url-loader处理后的文件是在static目录下生成fonts目录下的文件.全部样式文件打包在css目录下app.hash.css文件中. 但我们会发现发布后,会存在字体文件找不到的问题,查看css文件发现是iconfont字体文件的路径引用问题. 解决方法: 在build/utils文件中的下图所示位置添加../../

  • 详解vue项目打包步骤

    详解vue项目打包步骤

    终端运行命令 npm run build 打包成功的标志与项目的改变,如下图: 点击index.html,通过浏览器运行,出现以下报错,如图: 那么应该如何修改呢? 具体步骤如下: 1.查看package.js文件的scripts命令 2.打开webpack.dev.conf.js文件,找到publicPath: config.dev.assetsPublicPath,按Ctrl点击,跳转到index.js文件 3.其中dev是开发环境,build是构建版本,找到build下面的assetsPu

  • vue项目打包部署到服务器的方法示例

    vue项目打包部署到服务器的方法示例

    上上一篇我写过一些关于vue项目部署到linux服务器的文章,但是那是以node作为开发环境 pm2 守护进程的方式,让他能正常运行,可是还是出现了问题,因为属于与APP交互的页面,在webView中打开过慢,APP的用户体验非常的差,所以我查找了资料,改变了部署方式,接下来我介绍一下 这一次,我想Tomcat为例 我们先看一下Linux中 Tomcat下面的目录结构: 以vue-cli 搭建出来的手脚架 webpack的模板下的/config/index.js,这里可以看到assetsPubl

  • vue打包之后生成一个配置文件修改接口的方法

    前言: 我们的vue代码打包上传到服务器之后,要是数据接口 以后换了域名什么的,是不是需要重新去vue文件里修改接口. 能不能生成一个配置文件,里面可以配置域名或其它什么字段之类的,这样以后换了域名,只需打开记事本 修改一下域名即可. 教程: 第一步:安装generate-asset-webpack-plugin插件 npm install --save-dev generate-asset-webpack-plugin 第二步:配置webpack.prod.conf.js文件 //让打包的时候

  • vue打包使用Nginx代理解决跨域问题

    vue 在开发环境,涉及跨域,就在本地配置了代理,但是部署到服务器上,就不行了. 解决方法有一下几种 服务器端配置CORS 用nginx反向代理,和访问本地服务器是一样的 可以修改成正式线上的地址,再build 推荐 使用nginx配置反向代理,这样就可以在前端彻底解决跨域问题. vue index.js文件源码 'use strict' // Template version: 1.2.7 // see http://vuejs-templates.github.io/webpack for

  • 解决Vue 项目打包后favicon无法正常显示的问题

    在开发中经常需要为项目添加favicon以增加网站辨识度,在使用Vue开发中出现添加的favicon.ico无法显示问题,如下给出解决方法: 问题分析: 问题根源在于路径,如果使用http链接作为favicon地址一般不是出现问题,出现问题的基本在使用本地图片作为favicon. 如下常规配置: 在项目中使用大家常用的经典将图片文件与应用的index.html放在项目的根目录下,同时在index.html中正确配置favicon路径. 项目启动后会发现该中配置方式并没有生效: 打包后的项目同样存

  • vue项目打包之后背景样式丢失的解决方案

    vue项目打包之后背景样式丢失的解决方案

    原始 build/untils.js 原因:至于为什么背景图有的打包后存在,有的丢失,那是因为vue会把图片转成base64,但是图片大小超过阈值就不转了,直接引,而背景图片里用的是相对路径最后会直接替换成static,但是明显路径会有问题,所以得配置下. 修改     需要在上面红框中添加下面语句: // 背景图片丢失:写改css中的路径(添加) publicPath: '../../' 然后重新npm run dev即可 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作

  • 使用electron将vue-cli项目打包成exe的方法

    如果你已经做好了一个vue的项目,并且想要将他打包成exe,那么请继续阅读. 首先你可以下载一个demo了解一下. git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install npm start 这个demo主要就是main.js和package.json 打开main.js const {app, BrowserWindow} = require('electron

  • vue前端项目打包成Docker镜像并运行的实现

    vue前端项目打包成Docker镜像并运行的实现

    目录 vue前端项目打包成Docker镜像并运行 前端将vue打包成镜像发布 一.总体预览 二.打包配置 三.问题思考 vue前端项目打包成Docker镜像并运行 首先说明咱们的前端项目是基于Vue的,反向代理使用的是nginx 1.打包vue前端项目生成dist文件夹上传至服务器 新建一个文件夹,叫vueDockerTest,下面的文件都需要. cert是你存放ssl证书的文件夹,nginx.conf 是nginx的配置文件,dist是你打包的前端静态文件 2.修改Dockerfile文件 #

  • IDEA 将 SpringBoot 项目打包成jar的方法

    新建SpringBoot项目:IDEA 创建 SpringBoot 项目 一.打包配置 1.File -> Project Structure 2.Project Structure 3.设置启动类及META-INF 根据 modules 创建 jar.如图所示,选择项目,入口类等.最后一项 META-INF 默认放到 src\main\java 目录里,如果使用默认值,没有进行其他配置,生成的 jar 有可能不会包含 META-INF 目录,导致运行 jar 出错,正确的是将 META-INF

  • Python项目打包成二进制的方法

    Python项目打包 python本身是一种脚本语音,发布的话,直接发布源代码就可以了,但是,可能有些公司并不想发布源代码,那么,就涉及到打包了,网上有很的打包教程,其实我也没有认真去研究,因为我只想简单点,所以,我打算直接编译成pyc二进制文件来发布,就可以了. 问题 编译成二进制文件(*.pyc)之后,文件名都变了,模块之间怎么引用? 网上的例子,大都是对单个文件编译的介绍,对整个目录编译的话,也都是输出到相应的文件夹下,需要单独抽取出来,发布. 解决问题 一般编译之后的文件命名为:比如我的

  • 将java普通项目打包成exe可执行文件的步骤记录

    将java普通项目打包成exe可执行文件的步骤记录

    前言 · 提示,无论打包成jar还是exe程序,运行都需要JDK,需要给没有安装JDK的电脑安装:不会安装JDK的朋友可以参考这篇文章:https://www.jb51.net/article/179937.htm · maven项目有自己的打jar包方式,我们普通的java项目,可以安照步骤一打包成jar: 步骤一.先把项目打包成jar包 1. 打开项目结构 2. 选择jar包形式 3. 设置主类 4. 构建 5. 确认构建 6. 打包完成,在项目的out目录下有jar了. 步骤二.把jar包

  • 将python项目打包成exe与安装包的全过程

    将python项目打包成exe与安装包的全过程

    目录 一.打包Flask项目 1.1自己写个Flask 2.2 下载pyinstaller 2.3 进入到项目路径下,执行 2.4 运行exe,测试 二.使用nsis把文件夹打包成windows的安装包 2.1 下载安装nsis 2.2把dist文件夹下的run文件夹压缩成zip 2.3使用nsis把压缩包,做成windows安装文件 总结 一.打包Flask项目 1.1自己写个Flask 2.2 下载pyinstaller pip install pyinstaller 可选参数 示例 说明

  • Python项目打包成exe文件

    Python项目打包成exe文件

    目录 前言 环境依赖 项目打包 总结 前言 之前有人私信我,他写了一个在终端交互的小程序,希望可以不在IDE的终端显示,而是独立一个窗口进行交互.其实只要把项目打包成exe执行文件,就可以在执行的时候在cmd独立一个窗口了. 如果python项目打包exe呢?下面按照步骤讲解一下. 环境依赖 安装pyinstaller. pip install pyinstaller -i https://pypi.douban.com/simple 项目打包 项目部分代码 先看一下项目在终端执行的效果. 使用

  • 将java项目打包成exe可执行文件的完整步骤

    将java项目打包成exe可执行文件的完整步骤

    目录 如何使用exe4j把jar打包成exe文件 一.将java程序打包成jar包 二.将打包后的jar包打包成exe可执行文件 总结 如何使用exe4j把jar打包成exe文件 最近,做了几个javafx的项目,想要把jar包打成exe的可执行软件,下面时我使用exe4j打包的方法 一.将java程序打包成jar包 1. Flie —> Project Structure (或者Ctrl+Shift+Alt+S) 2. Artifacts 设置 3. 选择要打包的项目,选择要执行的 main

  • 详解Java Project项目打包成jar，并生成exe文件

    详解Java Project项目打包成jar，并生成exe文件

    初衷: 工作中写一些辅助工作的小工具时,将其打成exe,方便使用 准备工作: Eclipse,jdk,net.sf.fjep.fatjar_0.0.32.jar,exe4j.exe 1 将项目打包成jar文件: 1.1 用Eclpise的Export功能生成jar(单纯生成jar包时推荐) 目录结构 右击项目,选择Export 只留java文件 默认next到finish,有两种处理方式 方式一:自动生成MANIFEST.MF(默认的) 方式二:自己写MANIFEST.MF(可以写一些自己想要的

  • 将python文件打包成EXE应用程序的方法

    相信大家都想把自己完成的项目打包成EXE应用文件,然后就可以放在桌面随时都能运行了,下面来分享利用pytinstaller这个第三方库来打包程序,既简单又快捷,我也试过用其他的方式来打包Python文件,但是都没有pyinstaller这个好用和快捷 首先我将详细的将整个操作过程写出来,你首先要安装pycharm,这个无脑的操作,就不必说了,(看完一定能学会) 打开pycharm的终端terminal,然后pip install pyinstaller(任何库都可以) 然后会出现安装日志 因为我

随机推荐