首页 > 其他分享 >如何利用nw.js打包vue项目

如何利用nw.js打包vue项目

时间:2024-09-20 21:21:23浏览次数:11  
标签:exe package js vue vue2 nw

引言

最近有一个开发windows桌面应用的需求, 需要将vue项目打包成.exe文件,最好是变成可安装版(非绿色版)。特此记录一下如何通过nw.js将vue项目打包成.exe。可能这种方式不是最优,仅供大家参考!

nw.js简介(以下描述来自nw.js官网)

  NW.js基于Chromium和Node.js 。 NW.js能够通过页面技术开发桌面应用 , 同时可以调用Node.js代码以及模块 。 未来 , 你可以使用NW.js轻松将页面应用制作成桌面应用 。

下载nw.js

nw.js官网: https://nwjs.io/

第一步: 下载nw.js的sdk

在这里插入图片描述

第二步: 解压缩下载的zip包,目录结构如下:

在这里插入图片描述

第三步: 双击nw.exe(出现下图代表没错)

在这里插入图片描述

创建vue2项目

第一步: 在解压目录下使用cmd命令窗口

在这里插入图片描述

第二步: 创建vue2项目

如果你还没有安装Vue Cli,可以使用npm或yarn来安装:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

创建一个vue2项目(选择vue2即可)

vue create vue2     //此处vue2为项目名, 可自由取名

cmd命令窗口
在这里插入图片描述

在这里插入图片描述

浏览器访问 http://localhost:8080/ 出现以下页面表示项目创建成功
在这里插入图片描述

第三步: 修改vue.config.js

添加一行(不同的构建工具这里有所不同,但都是修改成‘./’):

publicPath: ‘./’

在这里插入图片描述

第四步: 保存后打包vue2项目

在这里插入图片描述

第五步: 新建文件夹package.nw

在这里插入图片描述

第六步: 将 vue2/dist/ 目录下的文件拷贝到 package.nw 中

在这里插入图片描述

第七步: 在package.nw目录下新建package.json文件, 编写如下代码
{
	"name": "vue2",
	"main": "index.html"
}
第八步: 将package.nw目录拖至 nw.exe 上(这就是运行),出现y以下结果表示没问题

在这里插入图片描述

第九步: 生成 vue2.exe (绿色版完成)

在这里插入图片描述

双击vue2.exe出现第八步的结果表示成功

将这个文件夹压缩发送给别人便是一个绿色版软件

第十步: 制作下载程序

制作前需要下载一个软件 --> InnoSetup
我下载的网址: https://pc.qq.com/detail/13/detail_1313.html
工具资源已上传,也可按需自取

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述在这里插入图片描述

然后弹出两个框,点击是,然后选择文件路径

生成了一个文件夹和一个文件
在这里插入图片描述

完结

可将Output文件夹里面的.exe发送给其他人,便可以安装使用了。

注意: vue3或者其他构建vue的方式 同理,区别在 第三步: 修改vue.config.js
  1. 可能不叫vue.config.js文件,可能是在config/index.js中
  2. 可能不叫publicPath,可能是base或者assetsPublicPath,但是都是修改为 ‘./’

标签:exe,package,js,vue,vue2,nw
From: https://blog.csdn.net/m0_73431159/article/details/142403217

相关文章

  • python爬虫之json数据的提取
    json数据提取需要安装jsonpath库并且只对json数据有用#一个data字典data={}#取出python从入门到精通的价格print(data['库存']['书籍'][0]['价格'])#jsonpathimportjsonpath#jsonpath。jsonpath(数据,'语法规则')#$代表根节点#..不管位置,选择符合条件的数......
  • JS 在幕后是如何工作的?
    JavaScript的工作原理JavaScript在单线程环境中运行,这意味着它一次执行一项任务。它处理执行上下文(EC)中代码的执行,可以是全局的或功能性的。全局执行上下文(GEC)加载代码文件时创建。GEC负责设置全局对象(在浏览器中是window)和this关键字。在全局范围内声明的所有变量和......
  • jsDoc npm 模块任务
    目前我正在工作/维护遗留的js/react应用程序,没有办法重新工作到typesript,这就是为什么我打开jsdoc作为js现有的开发时类型系统。太长了;typescriptnpm模块由jsdoc制作,useduck在70loc下带回了redux的黄金时代。该模块在开发时的主要用例,帮助您的复杂状态保持......
  • Js电子表格组件
    我经常使用的一件事是我们用来组织数据的Excel表格。Jspreadsheet执行的操作非常相似,但直接在浏览器中执行。您无需安装任何东西,只需打开并使用它即可。它非常适合任何需要以简单实用的方式组织信息的人。简单易用:如果您曾经使用过Excel,您将会有宾至如归的感觉。界面非常相似......
  • React.js CSS 窗口宽度
    窗口宽度窗口宽度的概念什么是窗口宽度窗口宽度是指浏览器窗口的水平宽度。在网页设计中,了解窗口宽度对于创建响应式布局非常重要。它决定了页面元素在不同屏幕尺寸下的显示方式。通过获取窗口宽度,开发者可以根据用户设备的屏幕大小来动态调整页面布局,以提供更好的用户体验。在Rea......
  • JS -真与假-
    真值和假值:在javascript中,真值和假值用于确定布尔值中的值是true还是falsecontext.这个概念对于使用if语句等条件控制程序流程至关重要。falsyvalues:0,"",null,nan,false,undefined登录后复制console.log(boolean(0));//false登录后复制console.log(boolean(undefine......
  • ejs模板引擎分页CDN设置指南
    要在ejs模板引擎中实现分页,请按照以下步骤操作。第1步:包含分页cdn在ejs文件底部添加以下脚本:<scriptsrc="https://cdn.jsdelivr.net/gh/sujithvsuresh/pagination-cdn@master/pagination.js"></script>登录后复制第2步:向模板添加分页控件在您希望显示分页按钮的位置添加......
  • HTPX 简介:适用于 JavaScript 和 Nodejs 的轻量级多功能 HTTP 客户端
    作为开发人员,我们的web应用程序通常需要一个可靠且高效的http客户端,无论我们是在浏览器中使用javascript还是在服务器端使用node.js进行构建。这就是我创建htpx的原因——一个强大的轻量级解决方案,旨在简化http请求,同时为现代开发提供一系列功能。在本文中,我将引导您......
  • Day f Brylnt:Nextjs 与 Remix
    大家好!我知道这与Brylnt的制作并不直接相关,但在决定使用哪个框架时我遇到了一些问题,我想我应该分享一下我对两个流行竞争者的想法:Next.js和混音。这两个框架都非常出色,并且根据项目的不同,任何一个都可能是正确的选择。由于我使用的是T3Stack,其中包括Next.js,我自然倾向于它,......
  • DeshiJS 与 Vuejs、Angular 和 React:轻量级挑战者
    DeshiJS是一个新的轻量级JavaScript框架,旨在快速、直观且可扩展。**DeshiJS**只有10KB,专注于为开发人员提供最小的反应式核心,使其成为注重性能和简单性的中小型项目的理想选择。让我们来看看它与重量级的Vue.js、Angular和React相比如何。DeshiJS这是更新的博客文章,其中......