把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文件。

你可能感兴趣的:(javascript,前端,vue.js)