方案一:利用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项目部署在服务器上,运行启动,网页外部套一层应用外壳。

成功。
打包方式:
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打包谷歌浏览器的方式

https://www.cnblogs.com/badaoliumangqizhi/p/13298182.html
https://www.cnblogs.com/luzhanshi/p/11045096.html

Logo

前往低代码交流专区

更多推荐