首先需要下载nw,然后解压打开,如图:

在以上新建一个同级项目文件夹,然后把把项目打包,将dist中的static文件夹与index.html放入,并新建一个package.json(可使用npm init生成),如下:

package的配置中,main和name是必须的属性,name需要是小写字母或者数字,可以包含.或者_或者-

其它属相:

{  
       "main": "index.html",  //程序的起始页面 
      "name": "demo",   //全局唯一name
      "description": "demo app of node-webkit",  //程序描述
      "version": "0.1.0", //版本号
      "window": {  
            "title": "demo",  //设置默认title
            "icon": "favicon.png", //窗口的icon。 
            "toolbar": false,  //显示导航栏
            "resizable": true,  //允许调整窗口大小
            "fullscreen": false,  //全屏
            "show_in_taskbar": true,  //win任务栏显示图标
            "frame": true,  //程序边框显示
            "position": "center",  //窗口打开时的位置,可以设置为“null”、“center”或者“mouse”
            "width": 800,  //主窗口的的宽度
            "height": 700,  //主窗口的的高度
            "min_width": 400,  //窗口的最小宽度
            "min_height": 300,  //窗口的最小高度
            "max_width": 800,  //窗口显示的最大宽度
            "max_height": 670,  //窗口显示的最大高度
            "show": true,  //启动时窗口可见。
            "show_in_taskbar":true,   //在任务栏显示图标。
            "kiosk": false  //如果使用kiosk模式,应用程序将全屏显示,并且阻止用户离开应用。
        } 
}

  

nw app 或 nw .运行,也可以直接将新建的项目文件夹拖拽至nw.exe上运行,就可以看到此时的桌面项目样子。

接下来压缩新建的项目文件夹中的文件并更名为XXX.nw,如dome.nw,并把这个XXX.nw拿到父级(与项目文件夹一样,与nw目录同级)。

接下来运行:copy /b nw.exe+dome.nw dome.exe

出现了dome.exe文件,继续:

下载并安装Enigma Virtual Box,打开软件并输入dome.exe的位置路径与输出位置路径,并把相关需要文件add到下面的file中,点击Process

我是将除了新建的项目文件与.exe文件之外的文件全拖了进去。

nw有个缺陷是打的包会大了点。

nw打包vue项目exe的更多相关文章

  1. nw打包vue项目exe更换图标

    web项目用nw打包好了之后发现没办法更换桌面显示图标问题,找了一下发现大多推荐Resource进行最后更换,试了第一次怎么也不管用,电脑重启了一下就行了...... 首先下载安装好了Resource ...

  2. nw打包vue项目 安装包

    接着上篇nw打包vue项目exe中: copy /b nw.exe+dome.nw dome.exe 出现了dome.exe文件之后,要是打算打包成为安装包,网上推荐的是Inno Setup Comp ...

  3. electron打包vue项目

    electron是什么 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并 ...

  4. 使用electron-packager electron-builder electron-updater 打包vue项目,支持在线更新

    1.如何用electron-packager electron-builder打包vue项目,打包成桌面程序. 步骤一. 执行npm run build 打包你的vue项目. 打包成功后,生成dist ...

  5. 使用Cordova打包Vue项目

    因为公司项目要求, 原本的vue移动端项目, 现在要求能使用定位, 调用摄像头等功能, 并且开发成混合APP. 一个小白的孤军奋战史, 记录一下, 以备后用.... 第一步: 安装cordova 在命 ...

  6. 教你用Cordova打包Vue项目

    现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app. 据我现在的了解打包Vue项目目前流行的就是使用weex和cordova.weex是 ...

  7. webpack打包vue项目之后生成的dist文件该怎么启动运行

    亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...

  8. docker 运行jenkins及vue项目与springboot项目(三.jenkins的使用及自动打包vue项目)

    docker 运行jenkins及vue项目与springboot项目: 一.安装docker 二.docker运行jenkins为自动打包运行做准备 三.jenkins的使用及自动打包vue项目 四 ...

  9. Cordova打包vue项目生成Apk (解决cordova build android抛出的zip问题)

    最近对vue前端框架情有独钟.但研究了一下怎么把vue项目打包成android apk来玩玩. 首先讲一下创建vue2.x项目.其实在之前的文章中都有写过,有兴趣的同学可以去看看.http://www ...

随机推荐

  1. Composer学习

    Composer简介 Composer是PHP的一个依赖管理工具,不是包管理器:在项目中声明所依赖的外部工具库(libraries),Composer会自动安装止血工具库及依赖的库文件. 安装方式 C ...

  2. console 对象

    JavaScript 原生中默认是没有 Console 对象,这是宿主对象(也就是游览器)提供的内置对象. 用于访问调试控制台,在不同的浏览器里效果可能不同.Console 对象方法:

  3. Java 组件化(gradle)

    组件化什么是组件化,直接看下面两张图. 上面是非组件化的项目,下面是组件化的项目. 非组件化的问题如果项目本身有多个互相不影响的模块,甚至有多人分开负责各个模块的开发时,非组件化项目的弊端就会暴露出来 ...

  4. Qt项目管理文件(.pro)及其作用详解

    http://c.biancheng.net/view/1819.html 在 Qt Creator 中新建一个 Widget Application 项目 samp2_1,在选择窗口基类的页面选择 ...

  5. php内置函数分析之array_sum()

    PHP_FUNCTION(array_sum) { zval *input, *entry, entry_n; if (zend_parse_parameters(ZEND_NUM_ARGS(), & ...

  6. Django【第6篇】:Django之ORM单表操作(增删改查)

    django之数据库表的单表查询 一.添加表记录 对于单表有两种方式 # 添加数据的两种方式 # 方式一:实例化对象就是一条表记录 Frank_obj = models.Student(name =& ...

  7. 【学习笔记】Minkowski和

    这还是个被我咕了N久的玩意 Minkowski和是一个奇怪的玩意 他长这样 $S={a+b \| a \in A , b \in B}$ AB可以是点集也可是向量集(显然) 他可以处理一些奇怪的东西 ...

  8. 【华容道】题解(NOIP2013提高组day2)

    分析 这道题很容易想到令f[x][y][x1][y1]表示空白块在(x,y).指定棋子在(x1,y1)时的最少步数,让空白块和四周的棋子交换,当空白块要和指定棋子交换时,把指定棋子移动,搞一下BFS就 ...

  9. vue组件学习(一)

    1, vue中的 is 的用法,有时候我们需要把一个组件绑定到指定的标签下,比如把tr组件放到table下,直接这样写是不行的, <!DOCTYPE html> <html lang ...

  10. awk基础学习

    2019-12-20 需要巧记,很多格式,学习难度:grep.sed.awk awk知识概述 1三剑客awk命令介绍2三剑客awk命令执行原理语法结构3三剑客awk命令实操练习查询替换信息排除(取反) ...