nw.js打包vue-cli项目成 .exe

用vue-cli脚手架搭建vue项目后，再用以前的方法打包项目就不太行了就需要新的方法了

一、初始化项目

1.先运用交手架搭建一个项目，cnpm i将所需组件下载
2.下载nwjs

cnpm install nw@0.14.7-sdk --save-dev

二、使应用以nw启动

1. 修改package.json文件，在dev命令最后添加 --open nw

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open nw",
    "start": "npm run dev"
}

--open表示服务器启动后打开页面
--open nw 后面跟nw，表示用nw.js打开页面
2.添加下面的代码，指定入口

"main": "http://localhost:8080/"

然后运行npm run dev即可以正常的打开项目

三、配置打包

1. 添加nwjs-builder-phoenix到开发依赖

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

2. 修改config/index.js，将全部的assetsPublicPath:'/'替换为assetsPublicPath: ''，避免打包后加载不到资源
3. 添加nwjs-builder-phoenix打包的选项到package.json

"build": {
    "files": [
      "dist/**/*"
    ],
    "output": "./releases",
    "nwVersion": "0.14.7",
    "nwPlatforms": [
      "win"
    ],
    "nwArchs": [
      "x86"
    ],
    "overriddenProperties": {
      "main": "./dist/index.html"
    }
  }

这里的配置中，overriddenProperties指定了main在打包后的值，使得打包后可以正常加载

4. 添加打包命令

"dist": "npm run build && build --tasks win-x86 --mirror https://npm.taobao.org/mirrors/nwjs/ ."

6. 打包

npm run dist

打包后会输出到package.json中build.output设置的文件夹下