經過實踐和學習，發現本篇文章部分內容已經過時，請看我的關于 Vue 和 NW.js 的 最新文章 和相關實踐項目 vue-nw-seed 。

---

使用到的技能點

• vue2

• webpack

• NW.js

• Node.js

一、前言

先講一下這個項目的由來。我司要新上一個產品，是面向教育領域的一個東西，要求快速開發又必須要兼容 XP ，所以就選 NW.js 來做桌面客戶端。同時，前端的輪子方面，開始嘗試在面向用戶的業務上應用 vuejs 。
在這個過程中，也踩到了一些坑，也學到了一些新的小技巧，分享出來給大家參考一下。

有同學問，為啥不直接出一個完整項目？
我想等 webpack 升級完 webpack2 的時候再來一個懶人 seed 項目包吧

二、vue&webpack 項目搭建

首先用 vue-cli 快速的搭建一個 webpack 模板項目，省心又省事兒。
這部分不做過多介紹，很容易的。
方便新人理解和學習，給個參考鏈接 https://github.com/vuejs-temp...

三、NW.js 的建構

整個 nw 建構是基于 vue&webpack 這個前置步驟的項目的。
好了，我們開始。

1、先用 npm 安裝 NW.js

1) 能順利翻墻

NW.js 開發者們提供了 nwjs/npm-installer
如果您的網速較好，翻墻順利的話，可以直接

npm install nw --nwjs_build_type=sdk --save

2) 網絡不太好

當然我的網絡情況就不是很好，233333
這時候可以先下載好 nw 的 sdk 包到本地，墻外地址：https://dl.nwjs.io/v0.20.1/nwjs-sdk-v0.20.1-win-x64.zip （截至目前現在最新的sdk版本是 0.20.1 ，系統環境是 win10 x64）當然，我作為一個老司機，也有不可推卸的責任，我把我這個包也發到了百度云上了：鏈接: http://pan.baidu.com/s/1i52ZO8l 密碼: 3tt2
做了點微小的貢獻，謝謝大家。

我已經嘗試過 file:// 那個方法不能用了，換server模式吧

切換命令行目錄到當前sdk包所在位置

C:\Users\anchengjian\Downloads> mkdir 0.20.1
C:\Users\anchengjian\Downloads> cp nwjs-sdk-v0.20.1-win-x64.zip ./0.20.1

再開啟 server 服務，如果有python直接

C:\Users\anchengjian\Downloads> python -m SimpleHTTPServer 9999

或者換個姿勢

C:\Users\anchengjian\Downloads> npm install http-server -g
C:\Users\anchengjian\Downloads> http-server -p 9999

服務開好就可以繼續下一步了，切換目錄到項目代碼的目錄下。

先創建一個 .npmrc 文件，內容如下：

nwjs_build_type=sdk
NWJS_URLBASE=http://localhost:9999/

再然后直接 npm 安裝 nw

E:\code\vue-webpack-nw> npm i nw --save

這時，如無其他問題，已經裝好了。

2、這時候開始增補nw相關的建構

下文直接以文件名為小標題

1) package.json

{"name": "vue-webpack-nw","version": "1.0.0","description": "vue-webpack-nw","author": "anchengjian <anchengjian@gmail.com>","private": true,"scripts": {"dev": "node build/dev-server.js","build": "node build/build.js","lint": "eslint --ext .js,.vue src"},"dependencies": {// ...},"devDependencies": {// ...},"engines": {"node": ">= 7.0.0","npm": ">= 4.0.0"},// 以下為 nw 的配置新加內容"main": "./index.html","window": {"title": "nw-vue-webpack2","toolbar": true,"frame": true,"width": 1200,"height": 800,"min_width": 800,"min_height": 500},"webkit": {"plugin": true},"node-remote": "http://localhost:8080"
}

2) build/webpack.base.conf.js

增加基礎配置

module.exports = {// ...// 以下為新加內容target: 'node-webkit'
}

3) build/dev-nw.js

新建一個名為 dev-nw.js 的文件
內容如下，直接copy吧。
原理我就不講了，大致實現的功能是:
先用 Node.js 修改當前項目 index.html 內容為打包出來的 index.html，然后再用 nw 打開當前項目目錄，當關閉或者報錯的時候再還原 index.html ，當前，你直接 kill 進程，這個還原就會出問題。自己看著改吧，233333

const path = require('path')
const url = require('url')
const fs = require('fs')
const http = require('http')
const exec = require('child_process').exec
const rootPath = path.resolve(__dirname, '../')
const nwPath = require('nw').findpath()// 修改index.html文件中的css和js的地址
const indexHtmlPath = path.resolve(__dirname, '../index.html')
const indexHtmlContent = fs.readFileSync(indexHtmlPath, 'utf-8').toString()// 退出時恢復原樣子
process.on('exit', exitHandle)
process.on('uncaughtException', exitHandle)function exitHandle(e) {fs.writeFileSync(indexHtmlPath, indexHtmlContent, 'utf-8')console.log('233333,bye~~~')
}// get uri
var config = require('../config')
if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
var port = process.env.PORT || config.dev.port
var uri = `http://localhost:${port}/`// start lauch NW.js
requestGet(uri, htmlText => {htmlText = htmlText.replace('src="/', `src="${uri}`).replace('href="/', `href="${uri}`)fs.writeFileSync(indexHtmlPath, htmlText, 'utf-8')let runNwDev = exec(`${nwPath} ./`, { cwd: rootPath }, (err, stdout, stderr) => {if (err) process.exit(0)})runNwDev.stdout.on('data', (data) => console.log(data))
})function requestGet(path, callback) {console.log('start with request: ', path)const options = Object.assign({ method: 'GET' }, url.parse(path))const req = http.request(options, res => {let body = []res.on('data', chunk => body.push(chunk))res.on('end', () => callback(Buffer.concat(body).toString()))})req.on('error', e => console.log('problem with request: ' + e.message))req.write('')req.end()
}

4) build/dev-server.js

在其最末尾修改一下，不需要打開瀏覽器，而是需要其代碼驅動打開nw.exe

  // when env is testing, don't need open itif (process.env.NODE_ENV !== 'testing') {// opn(uri)// modify by anchengjian// 這兒不需要打開瀏覽器，只用打開 nw 就行require('./dev-nw')}

5) build/dev-client.js

這個時候直接在執行 npm run dev 正常的話是可以用 nw.exe 打開當前項目代碼，但接著就可以看到有一個報錯

GET chrome-extension://hbdgiajgpfdfalonjhdcdmbcmillcjed/__webpack_hmr net::ERR_FILE_NOT_FOUND

原因也就是webpack請求的時候根據當前頁面地址來的，沒想到還有 nw 這么個環境
處理方法也簡單，更改 webpack-hot-middleware 的配置，讓其每次發請求的時候用__webpack_public_path__ 或者全局變量。
同時請注意path=__webpack_hmr

改hotClient這一行代碼為這樣子

var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true&dynamicPublicPath=true&path=__webpack_hmr')

這樣配置的文檔來源： webpack-hot-middleware

6) config/index.js

同時需要更改開發者模式下 assetsPublicPath 的配置，不然__webpack_public_path__依然為/

module.exports = {// ...dev: {env: require('./dev.env'),port: 8080,assetsSubDirectory: 'static',assetsPublicPath: 'http://localhost:8080/',proxyTable: {},// CSS Sourcemaps off by default because relative paths are "buggy"// with this option, according to the CSS-Loader README// (https://github.com/webpack/css-loader#sourcemaps)// In our experience, they generally work as expected,// just be aware of this issue when enabling this option.cssSourceMap: false}
}

至此，一個完整的開發建構就出來，后面慢慢更新產品模式的打包建構。

原文持續更新: https://github.com/anchengjian/anchengjian.github.io/blob/master/posts/2017/vuejs-webpack-nwjs.md