如何不用electron-vue将Vue项目打包成桌面程序exe？

本文共计825个文字，预计阅读时间需要4分钟。

场景 + electron-vue + 基于vue（基本上是它听起来的样子）+ 构造 electron 应用程序的模板代码。该项目的目的是为了要避免使用 vue 手动建立 electron 应用程序。electron-vue 充分利用 vue-cli。

场景

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的项目已经搭建完成并能成功部署，可以使用如下方式。

注：

​​ 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。

实现

首先执行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端口没有问题后就可以在浏览器中通过

你的IP:8080/index.html

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

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

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

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

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

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

然后将项目设置为release

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

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

双击这个exe文件