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

这篇具有很好参考价值的文章主要介绍了把Vue项目打包为桌面应用(最简)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        目前已知把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文件。文章来源地址https://www.toymoban.com/news/detail-560786.html

到了这里,关于把Vue项目打包为桌面应用(最简)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端Vue项目webpack打包部署后源码泄露解决

    前端项目使用nuxt框架(基于Vue),采用Webpack打包,部署到服务器后,进行漏洞检测。 经Webpack打包部署到服务器后,访问并打开开发者模式,在Source下出现[name]路径,内部包含(webpack)buildin文件夹。(做漏洞分析时,会认为该内容涉及源码泄露) 1.首先考虑源码泄露的问题 打

    2024年02月03日
    浏览(87)
  • 新星计划 Electron+vue2 桌面应用 2 项目编写

    练手的项目,需求简单,打算做平面设计社交类的软件。 练手用,简单处理,写个简单的记事本,本地保存txt,能导出为其他格式的文件。 获取用户的网卡地址用于数据加密,本地保存加密后的文件,导出为明文数据。 可以选择系统样式、自定义日志路径,可见软件信息(版

    2024年02月06日
    浏览(40)
  • 【前端部署】vue项目打包并部署到Linux服务器

    在vs code中打开vue前端项目文件夹,在终端中输入 npm run build ,打包完成后,在前端项目文件夹中会生成一个名为 dist 的文件夹,如下图所示: dist文件夹打开如下所示: 打开服务器终端,在终端中输入以下命令,下载nginx安装包。 其中nginx版本可以自己选择,具体版本可查看

    2024年02月06日
    浏览(68)
  • nginx: 部署前端项目的详细步骤(vue项目build打包+nginx部署)

    目录 第一章 前言 第二章 准备工作 2.1 项目打包理解 2.1.1 打包命令 2.1.2 理解npm run serve/dev 和 npm run build命令 2.2 nginx参数配置理解 2.2.1 nginx常用基本命令 2.2.2 默认配置 2.2.3 搭建不同网站的站点 2.2.4 禁止访问的目录以及一键申请SSL证书验证目录相关设置 2.2.5 根据文件类型设置

    2024年02月04日
    浏览(59)
  • Gitlab CI/CD 自动化打包部署前端(vue)项目

    一、虚拟机安装 1.vmware下载 2.镜像下载 3.Ubuntu 4.新建虚拟机 一直点下一步,直到点击完成。 5.分配镜像 二、Gitlab CI/CD 自动化部署项目 1.配置GitLab CI/CD: 2.生成SSH密钥对: 如果尚未生成,请在本地机器上生成一个SSH密钥对: 3.将SSH私钥添加到GitLab: 4.更新GitLab CI/CD配置: 5

    2024年03月13日
    浏览(63)
  • Jenkins自动拉取SVN源代码构建打包vue前端项目

    目录 1.功能需求 2.安装插件 2.1 安装NodeJS插件 2.2  安装SVN插件 3.配置环境 3.1  NodeJS环境 4.新建任务配置部署信息 4.1  源代码管理 4.2  构建触发器 4.3  构建环境  4.4  构建步骤 5.构建项目  5.1 点击查看控制台日志 使用Jenkins从SVN上拉取Vue项目进行自动构建打包。如果需要发

    2023年04月22日
    浏览(50)
  • 【微服务部署】四、Jenkins一键打包部署NodeJS(Vue)前端项目步骤详解

      本文介绍使用Jenkins一键将NodeJS(Vue)前端项目打包并上传到生产环境服务器,这里使用的是直接打包静态页面,发送到远程服务器Nginx配置目录的方式,首先确保服务器环境配置好,安装Nginx,运行目录,日志存放目录等。 一、服务器环境配置   Nginx安装也有多种方式

    2024年02月10日
    浏览(44)
  • 关于前端vue打包项目以及静态网站部署项目到阿里云ECS云服务器初学简单教程

    准备工作: 1.首先进入https://ecs.console.aliyun.com/ 领取或者购买一台简单的ECS云服务器。 进入网站注册登录后拉到页面最下面或者顶部搜索免费云服务器领取立即试用 ,当然富哥花钱买一台服务器也行。   创建完了以后可以进入云服务ECS工作台,然后就是以下界面   点击右边

    2024年02月04日
    浏览(73)
  • Vite4 + Vue3 项目打包并发布Nginx服务器 (前端必看)

    这里因为我们有的小伙伴可能不太需要服务器,单纯学习的话也没有必要去买一个服务器。如果需要把自己的东西部署到公网上,有很多方式,自行百度。你也可以购买阿里云或者腾讯云。逻辑都是一样的,我这里使用的虚拟机+centos系统,我已经提前在自己的机器安装好了。

    2024年02月05日
    浏览(90)
  • SpringBoot访问静态资源和jar外部静态资源,部署前端打包后的vue项目放入静态资源里

    记录一下使用SpringBoot访问静态资源和SpringBoot打包之后的jar外部静态资源,在开发的时候,一般选择前后端分离的方式,前端使用vue 后端使用SpringBoot,通常情况下,部署都是前端通过http去请求后端资源,涉及到http请求,那么肯定需要资源的目标地址IP,一般云端部署给到I

    2024年02月09日
    浏览(75)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包