vue 项目打包客户端（简单用法） electron-builder ，nodewebkit

已于 2022-06-20 15:35:11 修改
阅读量3.1k 收藏 4
点赞数
文章标签： vue.js 前端 electron
于 2022-05-06 11:15:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47694910/article/details/124603293
版权

方法一. 使用 nodewebkit 进行打包

1. 下载 nodewebkit ，官网下载即可 

2.下载完成，将压缩包解压为文件夹 ，例子：下图

3.新建文件夹，其中需要有两个文件，package.json 文件和index.html 文件

4.将这两个文件打包为.zip格式的压缩包，然后修改压缩包后缀名为.nw。

5.将 步骤4生成的.nw文件复制到 步骤二的nw文件夹中

最低0.47元/天 解锁文章
4258
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一步步使用electron把vue打包成客户端
weixin_47190975的博客
09-21 3591
一步步使用electron把vue打包成客户端
从零开始手把手教利用electorn+vue搭建一套客户端开发环境
weixin_41952131的博客
04-17 2517
针对网上electron开发框架太繁琐复杂的问题，本文从web端和electron端构建了客户端开发环境，并利用npm包工具解决多命令行开启和白屏问题。
vue-cli-plugin-electron-builder打包vue2
最新发布
2301_80553345的博客
05-22 422
会自动下载electron相关的包(需要选择node对应版本的electron包)，生成运行命令并在src目录下生成background.js。1、下载npm install vue-cli-plugin-electron-builder --save -dev。npm run electron:build打包，打包成功如下，会在dist文件夹中生成包。需要存在version，description，author，没有请添加。3、修改backgound.js，打开后窗口大小。
Electron + Vue3 开发桌面应用
热门推荐
Hyung的博客
01-04 2万+
Electron + Vue3 开发桌面应用
使用electron-builder打包vue成桌面文件
GGBOY__的博客
11-10 1137
在使用electron-builder打包之前，需要先认识electron是什么，这里我会简单的介绍一下。本文章主要说明electron-builder打包时候会发生的错误原因。
vue+electron 打包发布
myang147258的博客
07-14 2243
Electron是什么？Electron 是 GitHub 开发的一个开源框架，是网页应用 (web apps) 的一个原生包装层，它允许使用 Node.js（作为后端）和 Chromium（作为前端）完成桌面 GUI 应用程序的开发。Electron 可以用于构建具有 HTML、CSS、JavaScript 的跨平台桌面应用程序，它通过将 Chromium 和 node.js 合同一个运行的环境中来实现这一点，应用程序可以打包到 Mac、Windows 和 Linux 系统上。
Electron项目中通过electron-vue + electron-builder + electron-updater实现远程更新（包含源码）
04-01
本项目利用`electron-vue`、`electron-builder`和`electron-updater`这三款强大的工具，实现了一个完整的远程更新流程，包括检查更新、下载更新以及自动安装更新。以下将详细介绍这三个组件的功能和实现方式。 **1....
vue-cli-plugin-electron-builder-适用于Electron的Vue CLI 3插件，无需使用Electron Builder的必需配置。-Vue.js开发
05-27
然后，通过运行以下命令安装并调用vue-cli-plugin-electron-builder的生成器：vue add electronic-builder就是这样！ 您准备好出发了！ 要启动开发服务器，请执行以下操作：如果您使用Yarn（强烈建议使用）：yarn ...
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
11-19
写在前面：Electron相关的操作还是不要...———————————-分割线，下面的cnpm替换为npm吧——————————-1、安装electron-builder（注意全局安装 cnpm install -g electron-builder cnpm install -g e
vue-cli-plugin-electron-builder：使用Electron轻松构建用于桌面的Vue.js应用
01-30
然后，通过运行以下命令安装并调用vue-cli-plugin-electron-builder的生成器： vue add electron-builder 而已！ 您准备好出发了！要启动开发服务器： 如果使用（强烈建议）： yarn electron:serve 或者，如果您...
vue 客户端
05-29
支持路由机制，代理前端抽屉的前端页面，另外附带后台调用接口，可以作为vue入门级别很好锻炼demo
electron-builder打包过程中报错所需的文件
01-24
学习项目使用的是`vue3`+`typescript`+`vite`+`electron`，npm r Get ...
vue项目使用electron进行打包操作
qq_34170840的博客
05-13 7486
一、设置国内镜像 npm config edit 执行后会弹出npm的配置文档，将以下类容复制到文件末尾。 electron_mirror=https://npm.taobao.org/mirrors/electron/ electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/ 二、创建vue框架文件 这里不详细说了，就是创建一个vue项目，如果已有项目则跳过这一步。
Electron打包发布vue项目
haohan0307的博客
08-06 5821
electron发打包布vue项目，electron自动更新
Vue中的客户端路由( 使用 Vue-cli 创建vue项目并生成 Vue-router )
qq_46015513的博客
08-17 554
学习目标: 掌握 vue-router 两种安装方式: vue create +加项目名 创建项目时勾选上就可以了 npm 安装 npm i -S vue-router@3 后面建议加上3或这4 代表安装版本号 vue create 创建项目: 指令: 第一步,手动配置 第二步,选择要安装那些, 比如今天我们所说的 要安装 Router(路由) 第三步, 选择 vue项目版本 虽然vue3已经出来...
使用electron-builder将vue-cli项目打包为桌面应用程序
XavierJ的博客
10-10 728
项目场景 使用vue-cli开发完一个项目后，需要用electron-builder将项目打包为桌面应用程序。 如何打包 安装electron-builder vue add electron-builder 打包前的预览（推荐yarn） yarn yarn electron:serve npm npm run electron:serve 使用yarn或npm命令打包 yarn yarn electron:build npm npm run electron:build
electron-vue打包，使用electron-builder打包，简单方便
duanaibing3017的博客
11-14 1万+
项目用的是vue@2.5.16, electron@2.0.4 ,vue-electron@2.0.6,ui框架那些就不说了 首先下载electron-builder，这里建议使用cnpm挂淘宝镜像下载 npm install -g cnpm --registry=https://registry.npm.taobao.org ，先下载之后统一将整个node_module文件夹删除，用np...
nw.js node-webkit系列（24）如何对本地文件读写
@黄小泽的个人博客
08-16 1万+
本节主要介绍nw内置API"文件系统fs"的使用。调用方法为require("fs")；该API可以读取或写入本地磁盘文件或文件夹，实现对本地文件的控制权限。该控制权限仅限于用户电脑账户的普通账户权限，不具备管理员账户权限，意味着如果不通过授权，该方法实现的文件读写对具有管理员权限的文件或文件夹不起效用。 （一）require("fs")  Demo require("fs
体验NW.js打包一个桌面应用
飞鸟Blog
08-03 4257
1.安装nw，(也可在官网下载然后配置变量) npm install nw -g 一个最最简单的nw应用，只需要有index.html和package.json文件即可   2.项目准备，目录结构 app文件夹 +----index.html +----package.json index.html代码： DOCTYPE html> h
electron使用vue-cli-plugin-electron-builder打包只生成exe
02-24
使用vue-cli-plugin-electron-builder可以很方便地将Vue项目打包成Electron应用，并生成可执行文件（exe）。下面是一些简单的步骤： 1. 首先，确保你已经安装了Vue CLI和vue-cli-plugin-electron-builder插件。如果没有安装，可以使用以下命令进行安装： ``` npm install -g @vue/cli vue add electron-builder ``` 2. 在Vue项目的根目录下，运行以下命令来生成可执行文件： ``` npm run electron:build ``` 3. 执行上述命令后，vue-cli-plugin-electron-builder会自动进行打包，并在`dist_electron`目录下生成可执行文件。在Windows系统上，生成的可执行文件为`.exe`格式。 注意：在打包之前，你可能需要在`package.json`文件中进行一些配置，例如指定应用程序的名称、版本号、图标等。你可以在`package.json`文件中的`build`字段中进行配置。 希望以上信息对你有帮助！如果你还有其他问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值