方案一：利用electron直接打包项目

暂未成功，打包完exe会报错
打包方式：

（1）DOS窗口命令打包
DOS 下，输入 npm install electron-packager -g全局安装我们的打包神器：

cnpm install electron-packager -g

（2）在项目文件夹下面，也就是根目录下面打开DOS执行打包命令：

electron-packager . HelloWorld --platform=win32 --arch=x64 --icon=computer.ico --out=./out --asar --app-version=0.0.1 --overwrite --ignore=node_modules --electron-version 5.0.0

需要查看electron版本号 在npm里的electron中packege文件；里

各个参数介绍：
HelloWorld ：你将要生成的exe文件的名称

–platform=win32：确定了你要构建哪个平台的应用,可取的值有 darwin, linux, mas, win32
–arch=x64：决定了使用 x86 还是 x64 还是两个架构都用
–icon=computer.ico：自定义设置应用图标
–out=./out：指定打包文件输出的文件夹位置,当前指定的为项目目录下的out文件夹
–asar：该参数可以不加，如果加上，打包之后应用的源码会以.asar格式存在

，否则会以文件夹形式存在

–app-version=0.0.1：生成应用的版本号
–overwrite：覆盖原有的build,让新生成的包覆盖原来的包
–ignore=node_modules：如果加上该参数，项目里node_modules模块不会被打包进去
–electron-version 5.0.0：指定当前要构建的electron的版本,需要和当前的版本一致,具体可以在package.json文件中查看,可以不加

其他类似方案：
（1）首先先从git库里面克隆下electron的例子（后面会用到）

git clone https://github.com/electron/electron-quick-start
npm install  （建议cnpm比较快）
npm start

（2）vue项目中直接安装：

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

3.在build文件添加electron.js(git上clone下来的main.js,名字改下

4.更改config/index.js中生产模式下（build）的assetsPublicPth, 原本为 /, 改为 ./

5.项目的package.json中的scripts中增加指令

"electron_dev": "npm run build && electron build/electron.js",

6.先用npm run build 打包，npm run electron_dev可以查看效果

npm run build
npm run electron_dev

build目录下的electron.js复制到vue打的包dist文件下，项目的package.json复制到相同dist文件下。pageage.json加上一条打包指令：

"electron_build": "electron-packager ./ MYAPP --platform=win32 --arch=x64 --icon=./src/assets/home.ico --overwrite"

（8）到dist文件夹下，运行 npm run electron_build

npm run electron_build

vue打包 nginx vue打包exe文件_ico

方案二：把Vue项目部署在服务器上，运行启动，网页外部套一层应用外壳。

成功。
打包方式：
1.build打包

npm run build

注意：打包前需要将vue config下面index.js里面build部分的 assetsPublicPath路径‘/’改为‘./’，

2.在dist目录下新建server.js

内容为：

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

其中：hostname = ‘192.168.43.200’ 改为服务器的IP地址，不能用localhost。

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

4.在服务器上安装node。

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

npm install express

6.安装express成功后启动服务

node server

7.在浏览器中输入地址，可以看到vue项目的页面
http://192.168.43.200:8080/index.html

8.项目部署成功后，为其套一层桌面应用的外壳
可用HTML一键打包工具（收费）需要先开服务。打包后占用空间95MB

nativefier封装浏览器方式

前八步如方法二。然后使用node打包网站方式

npm install nativefier -g
nativefier "http://192.168.43.200:8080/index.html"

打包后exe路径 cmd有提示

文件夹170mb exe有123MB

Winform封装浏览器方式

  1. 打开Visual Studio -文件-新建项目-Winform桌面程序应用
  2. 在form1的设计页面中找到工具箱中的WebBrowser控件，拖拽到窗体中
  3. 右击WebBrower控件选择属性，设置其URL属性为你上面部署的项目的url
  4. 将项目设置为release
  5. 在解决方案资源管理器右击项目-重新生成，然后来到项目目录下的bin/release下的exe文件就在这里。
    未成功 报错脚本错误。貌似IE内核，兼容性差，可试验其他WinForm打包谷歌浏览器的方式