把Vue项目打包为桌面应用(nwjs)

目前已知把Vue项目打包成桌面应用有两种方式：（1）使用nwjs生成桌面应用；（2）使用Electron生成桌面应用。本文采用的是nwjs生成桌面应用，也是我认为最简单、最快捷的一种。

一、打包Vue应用程序

npm run build

二、添加 package.json 文件

新建 deskApp 文件夹，把Vue打包的文件拷贝到这个文件夹里面，然后在 deskApp 文件夹添加以下内容的 package.json文件。

{"name": "deskApp","version": "1.0.0","description": "","main": "index.html","window": {"title": "桌面应用","icon": "","width": 800,"height": 600,"toolbar": false,"frame": true,"resizable": true,"position": "center","transparent": false,"show": true},"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dist": "build --tasks win-x86,win-x64 --mirror https://npm.taobao.org/mirrors/nwjs/ .","start": "run --x86 --mirror https://npm.taobao.org/mirrors/nwjs/ ."},"author": "","license": "ISC","devDependencies": {"nwjs-builder-phoenix": "^1.15.0"},"build": {"nwVersion": "0.27.5"}
}

三、安装依赖并打包

npm install //安装打包所需要的依赖npm run dist //打包项目为 exe 文件

四、运行桌面程序

进入打包后的dist文件夹，其中x86、x64是不同系统的桌面应用，点击进入就会看到对应的exe文件。

把Vue项目打包为桌面应用(nwjs)相关推荐

把Vue项目打包为桌面应用(最简)
目前已知把Vue项目打包成桌面应用有两种方式:(1)使用nwjs生成桌面应用:(2)使用Electron生成桌面应用.本文采用的是nwjs生成桌面应用,也是我认为最简单.最快捷的一种. 一.打包Vue ...
Vue项目打包成桌面程序exe除了使用electron-vue你还可以这样
场景 electron-vue 基于 vue (基本上是它听起来的样子) 来构造 electron 应用程序的样板代码. 该项目的目的,是为了要避免使用 vue 手动建立起 electron 应用程序 ...
使用nw.js将vue项目打包为可在xp系统运行的桌面程序
前情提要在nw.js入门最如丝般润滑的教程一文中,作者介绍了简单的使用nw运行html文件为桌面程序以及将html文件打包为桌面可执行文件exe. 看vuecli创建的工程打包成exe文件可直接从[ ...
打包指令_将Vue项目打包为Windows应用（.exe）
2021年1月9日更新: 新增:解决国内用户下载electron速度太慢的问题调整:由于electron版本升级,删除原文中对electron版本限制在2.0的命令行语句背景朋友是做商品零售,每 ...
vue项目打包成.exe桌面应用
1.将vue项目打包成dist文件:npm run build:prod 2.新建文件夹,使用git下载(下载其中一种就行) gitee git clone https://gitee.com/wal ...
vue项目打包到腾讯云服务器全过程
本文将记录vue项目打包放到服务器的整个过程,本文中的例子是express+vue,希望能给遇到这方面问题的同学一个解决办法. 登录服务器假定已经拥有一个服务器账号,然后下载一个xftp5用来作文件 ...
vue项目打包成exe可执行文件
Vue项目打包成exe可执行文件实现思路:从electron官网上拉取代码,把官网上拉取下来项目中的index.html替换成自己vue项目打包好的dist文件中的index.html,输入打包e ...
如何将vue项目打包在服务器上运行
这里使用node.js 的Express(web应用框架)来运行我们用vue写好的项目. 1.首先通过win10自带的远程桌面连接就能进入到windows服务器 2.下载node.js 进 ...
vue html引入资源dev下404,webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)...
最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下一.首先修改c ...

把Vue项目打包为桌面应用(nwjs)

把Vue项目打包为桌面应用(nwjs)相关推荐

最新文章

热门文章