场景

electron-vue

基于 vue (基本上是它听起来的样子) 来构造 electron 应用程序的样板代码。

该项目的目的，是为了要避免使用 vue 手动建立起 electron 应用程序。electron-vue 充分利用 vue-cli 作为脚手架工具，加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder，以及一些最常用的插件，如vue-router、vuex 等等。

使用electron-vue可以将vue的项目打包成exe应用。

但是这种方式对于一开始使用electron-vue建立项目架构模板比较好，那样可以往上递增式的添加项目。

但是说如果说vue项目已经开发完成，并没有使用electron-vue来搭建项目模板，那么后期对于项目的

合并和迁移以及路径的修改等问题都是麻烦事。

所以如果说vue的项目已经搭建完成并能成功部署，可以使用如下方式。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

首先执行vue项目打包

npm run build

打包成功后

会在项目目录下生成dist目录。此目录就是打包之后的目录。

然后在dist目录下新建server.js

var express = require('express');var app = express();const hostname = '12.12.12.12';const port = 8080;app.use(express.static('./'));app.listen(port, hostname, () => {console.log(`Server is running `);});

注意要把这里的hostname改为要部署的服务器的ip,这里的12.12.12.12是随便填写。

切记要修改为自己服务器的ip。

主要这里也不能用localhost。

然后登录到Windows Server 服务器上，找一个磁盘目录。将整个dist目录复制到服务器上。

注意这里新建server.js的目的是为例使用node的express作为服务器去启动项目。

如果不想用express还可以使用tomcat、nginx、IIS等。

这里以使用express为例。

首先需要在服务器上安装node。

然后在服务器上的dist目录下打开命令行，使用npm 安装express

npm install express

安装express成功后启动服务

node server

注意这里启动的ip为localhost，正常应该是你在server.js中设置的ip。这里只是为了演示用。

然后在确保你服务器的防火墙和8080端口没有问题后就可以在浏览器中通过

http://你的IP:8080/index.html

来进行访问服务器上的项目

项目部署成功后下面就考虑套一层桌面程序的壳。

对于桌面程序的开发，做的较好的是C#的Winform开发。

所以打开Visual Studio -文件-新建项目-Winform桌面程序应用

然后在form1的设计页面中找到工具箱中的WebBrowser控件，拖拽到窗体中

然后右击WebBrower控件选择属性，设置其URL属性为你上面部署的项目的url

然后将项目设置为release

然后在解决方案资源管理器右击项目-重新生成

然后来到项目目录下的bin/release下的exe文件就在这里

双击这个exe文件

Vue项目打包成桌面程序exe除了使用electron-vue你还可以这样相关推荐

使用electron把vue项目打包成windows应用exe程序
1.安装electron依赖 npm install electron --save-devnpm install electron-packager --save-dev 2.修改vue.confi ...
JavaWeb项目打包成桌面程序，内嵌浏览器、tomcat、jre、mysql，实现一键安装
本文介绍的仅是基本的实现逻辑(主程序代码),不包含具体的实现方法,如需全套源码或者定制成品可+V a139412339 @echo off::获取管理员权限 if exist "%Syste ...
把Vue项目打包为桌面应用(nwjs)
目前已知把Vue项目打包成桌面应用有两种方式:(1)使用nwjs生成桌面应用:(2)使用Electron生成桌面应用.本文采用的是nwjs生成桌面应用,也是我认为最简单.最快捷的一种. 一.打包Vue ...
把Vue项目打包为桌面应用(最简)
目前已知把Vue项目打包成桌面应用有两种方式:(1)使用nwjs生成桌面应用:(2)使用Electron生成桌面应用.本文采用的是nwjs生成桌面应用,也是我认为最简单.最快捷的一种. 一.打包Vue ...
vue项目打包成.exe桌面应用
1.将vue项目打包成dist文件:npm run build:prod 2.新建文件夹,使用git下载(下载其中一种就行) gitee git clone https://gitee.com/wal ...
vue项目打包成exe可执行文件
Vue项目打包成exe可执行文件实现思路:从electron官网上拉取代码,把官网上拉取下来项目中的index.html替换成自己vue项目打包好的dist文件中的index.html,输入打包e ...
将网站打包成桌面程序并生成安装包（跨平台）
一.Nativefier将网站打包成桌面程序介绍 Nativefier 是一个命令行工具,仅仅通过一行代码就可以轻松地为任何的网站创建桌面应用程序,应用程序通过 Electron打包成系统可执行文件 ...
教你如何3分钟把VUE项目打包成apk，真的只要3分钟
前提准备使用vue-cli3搭建的项目工具 HBuilder X,他的图标长这个样子,点击下载做前端的大多数小伙伴们都应该知道,使用起来轻巧.急速,但是他主要是针对于VUE生态打造的,相对于 v ...
【Electron】使用Electron将web项目打包成桌面应用程序
目录一.所需环境&打包前准备 1.安装node.js 2.安装electron 3.web项目二.打包过程 1.打包配置 2. 安装打包器 3.执行打包命令: Electron是由GitH ...

Vue项目打包成桌面程序exe除了使用electron-vue你还可以这样

场景

electron-vue

实现

Vue项目打包成桌面程序exe除了使用electron-vue你还可以这样相关推荐

最新文章

热门文章