首页 > 其他分享 >使用nwjs打包VUE生成桌面应用

使用nwjs打包VUE生成桌面应用

时间:2023-06-19 09:47:41浏览次数:34  
标签:nwjs npm VUE 桌面 -- https 打包

摘抄自:https://blog.csdn.net/weixin_40521770/article/details/126907614

目前已知把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文件。
————————————————
版权声明:本文为CSDN博主「王髙鹏」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_40521770/article/details/126907614

标签:nwjs,npm,VUE,桌面,--,https,打包
From: https://www.cnblogs.com/sheizhuchenfu2/p/17490298.html

相关文章

  • 手牵手带你实现mini-vue
    1前言随着Vue、React、Angularjs等框架的诞生,数据驱动视图的理念也深入人心,就Vue来说,它拥有着双向数据绑定、虚拟dom、组件化、视图与数据相分离等等造福程序员的优点,那Vue的双向数据绑定实现原理是什么样的,如果让我们自己去实现一个这样的双向数据绑定要怎么做呢,本文就与......
  • 前端Vue图片上传组件支持单个文件多个文件上传 自定义上传数量 预览删除图片 图片压缩
    前端Vue图片上传组件支持单个文件多个文件上传自定义上传数量预览删除图片图片压缩,下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13099效果图如下:1.0.0(2023-06-18)组件初始化使用方法<!--count:最大上传数量 imageList:图片上传选......
  • Vue3 - 实现文本复制粘贴功能
    1.安装库并导入npmivue-clipboard3--save2.在需要的前端文件中导入importclipboard3from'vue-clipboard3'html结构如下<template><divclass="hello"><inputtype="text"v-model="text"><button@cli......
  • Vue.js 插槽
    学习目录:Vue.js简介Vue.js实例与数据绑定Vue.js计算属性和侦听器Vue.js条件渲染和列表渲染Vue.js事件处理Vue.js表单输入绑定Vue.js组件基础Vue.js组件通信Vue.js插槽Vue.js动态组件和异步组件Vue.js自定义指令Vue.js过渡和动画Vue.js混入Vue.js自定义事件和v-model......
  • Vue 开发环境搭建
    1安装环境Node.jsjs的运行环境,相当于java的jvm官网:https://nodejs.org/en,下载最新稳定版18.16.0LTS,双击安装即可自动安装了npm,终端验证:C:\Users\Administrator>node-vv18.16.0C:\Users\Administrator>npm-v9.5.1npm=nodepackagemanager,js包的管理工具,相当......
  • Vue实战(09)-列表渲染:让你的页面秒变爆款!
    1最基础的循环<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Vue中的列表渲染</title><scriptsrc="../vue.js"></script></head><body>......
  • JavaScript-Vue
    2Vue2.1Vue概述通过我们学习的html+css+js已经能够开发美观的页面了,但是开发的效率还有待提高,那么如何提高呢?我们先来分析下页面的组成。一个完整的html页面包括了视图和数据,数据是通过请求从后台获取的,那么意味着我们需要将后台获取到的数据呈现到页面上,很明显,这就需要我们使......
  • SpringBoot:SpringWeb项目+Vue项目dist包整合成jar包
    接到需求做一个小功能项目,其中还要配备前端页面,并且将前端打包进后端jar包内,由jar包运行。项目结构将Vue打包之后的dist文件放到resouces资源路径下修改pom文件将下面的build配置替换掉pom中的build<build><finalName>自定义项目jar名称(可以用${project.artifatId})</finalNam......
  • vue 路由懒加载
    VUE路由的懒加载,官网是这样说明的:当打包构建应用时,JavaScript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就会更加高效。VueRouter支持开箱即用的动态导入,这意味着你可以用动态导入代替静态导......
  • 前端Vue加载中页面动画弹跳动画loading
    前端Vue加载中页面动画弹跳动画loading,下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13091效果图如下:使用方法<!--ref:唯一ref top:距离中间顶部距离--><cc-loadingref="mixLoad":top="0"></cc-loading>//隐藏动画this.$refs.mix......