use nw.js Package Vue project as a desktop program that can run in XP system

Time:2021-1-12

previously on

staynw.js Introduction to the most silky lubrication tutorialIn this paper, the author introduces how to use NW to run HTML file as desktop program and package HTML file as desktop executable file exe.
The project created by vuecli can be packaged as an EXE file directly from the directory of [add NW plug-in based on the project created by vuecli to seamlessly convert to desktop program].

Topic of this article

  1. Package the Vue project as a desktop executable in the above running and packaging mode
  2. On the basis of the project created by vuecli, add NW plug-in to seamlessly transform it into desktop program
  3. It can run in XP system
  4. Support automatic update

Package Vue project as desktop executable

  1. Copy all files in dist directory generated by Vue project package to app and package.nw Under the directory

    Note: I try to put dist folder in app and package.nw Directory, and then modify package.json However, the dist directory is removed index.html And other files directly on the app and package.nw It can be started normally under the directory. Maybe it’s the cache

  2. Drag the app directory to the nw.exe Running above
  3. Execute packaging command to generate desktop software

    copy /b nw.exe+package.nw yourname.exe

On the basis of the project created by vuecli, add NW plug-in to seamlessly transform it into desktop program

Run the Vue project as a desktop program

  1. Create Vue project

    vue create yourname  // vuecli3+
    
    or
    
    vue init webpack yourname // vuecli2
    
  2. Add NW plug-in dependency

    cnpm install  [email protected]  --Save dev // the official document says that to support XP system, please use version 0.14.7. If you don't consider XP, you can install the latest version

    Note: cnpm installation is recommended, NPM installation is basically failed, and yarn installation is also rare and unstable! Therefore, cnpm installation is recommended

  3. Running projects
    Run the Vue project first. If there is a dependency error, delete the node_ Modules directory and then restartcnpm installthat will do
  4. Run projects as desktop software

    stay package.json Add a line of nwjs file entry code

    "main": " http://localhost : 8080 / ", // because the NW entry can be. HTML,. JS and online address. Because it runs locally, set main to the address of the project you ran in the previous step

    stay package.json Add a line of script command under scripts in

    "serve:nw": "nw",

    Then enter NPM run in the editor terminal serve:nw The desktop version of Vue project can be launched

Package Vue project as desktop program

  1. Package with plug-ins: nwjs builder Phoenix is recommended by www.chinanet.com

    cnpm install nwjs-builder-phoenix --save-dev

    stay package.json Add a line of script command under scripts in

    " build:nw ": "npm run build && build --tasks win-x86 --mirror  https://npm.taobao.org/mirrors/nwjs/  . ", // win-x64 version
    " build:nw :all": "npm run build && build --tasks win-x86,win-x64,linux-x86,linux-x64,mac-x64 --mirror  https://npm.taobao.org/mirrors/nwjs/  . ", // package multiple versions
  2. stay package.json Configure basic packaging parameters in

    "build": {
        "files": [
              "Dist / * * / *" // file path, the folder where you packed Vue
        ],
        "Output": "." / releases ", // output path, output location of packaged software
        "Nwversion": "0.14.7" // matches the version you downloaded
        "nwPlatforms": [
              "Win" // platform
        ],
        "nwArchs": [
              "X86" // matches the version parameter after the above packing command
        ],
        "overriddenProperties": {
             "main": "./dist/ index.html "// set the software entry file. In fact, this can be a web address
        }    
      },
  3. modify vue.config.js , set the packing path as a relative path, which will not be described in cli2 version

    module.exports = {
        publicPath: './',
        productionSourceMap: false,
    }

    After completing these three steps, run on the terminalnpm run build:nwThe packaged desktop software folder can be generated. Find the insideyour name.exeThen double click to run.

    If you do not need to support XP, you will--tasks win-x86Change to--tasks win-x64nwArchsInternalx86Change tox64that will do

Auto update


Frequently asked questions

  1. The default routing mode of vuecli3 + is history. After using NW to package, an error will be reported and the router.js Inmode: historyJust comment.
  2. Ifbuild/overriddenProperties/mianIs it true that as long as the website keeps running and the latest content, the software package will never need to be updated?

Complete configuration, packaged directory and effect

NW configuration is mainly in package.json The complete configuration is as follows

use nw.js Package Vue project as a desktop program that can run in XP system

Seepackage.json

Packaged directory

use nw.js Package Vue project as a desktop program that can run in XP system

Operation effect

use nw.js Package Vue project as a desktop program that can run in XP system

GitHub address

nw-vue-demo

At present, the most popular JS packaged desktop program is electron, but there are many simple articles about this entry, so I won’t repeat them for the momentelectron-vue-demo