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

一、初始化項目

1.先運用交手架搭建一個項目，cnpm i將所需組件下載
2.下載nwjs

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

二、使應(yīng)用以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表示服務(wù)器啟動后打開頁面
--open nw 后面跟nw，表示用nw.js打開頁面
2.添加下面的代碼，指定入口

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

然后運行npm run dev即可以正常的打開項目

三、配置打包

1. 添加nwjs-builder-phoenix到開發(fā)依賴

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設(shè)置的文件夾下