vue项目打包exe文件
方案一:利用electron直接打包项目暂未成功,打包完exe会报错打包方式:(1)DOS窗口命令打包DOS 下,输入 npm install electron-packager -g全局安装我们的打包神器:cnpm install electron-packager -g(2)在项目文件夹下面,也就是根目录下面打开DOS执行打包命令:electron-packager . HelloWorld
方案一:利用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封装浏览器方式
- 打开Visual Studio -文件-新建项目-Winform桌面程序应用
- 在form1的设计页面中找到工具箱中的WebBrowser控件,拖拽到窗体中
- 右击WebBrower控件选择属性,设置其URL属性为你上面部署的项目的url
- 将项目设置为release
- 在解决方案资源管理器右击项目-重新生成,然后来到项目目录下的bin/release下的exe文件就在这里。
未成功 报错脚本错误。貌似IE内核,兼容性差,可试验其他WinForm打包谷歌浏览器的方式
https://www.cnblogs.com/badaoliumangqizhi/p/13298182.html
https://www.cnblogs.com/luzhanshi/p/11045096.html
更多推荐
所有评论(0)