通過上一篇博文的學習，我們其實已經完成了我們設想的項目的開發。但是，我們做好的這套東西，是基於 nodejs 開發的。而我們最終希望，我們開發的項目，生成好一堆文件，然后隨便通過任何一個 http 服務就能跑起來，也就是，還原成我們熟悉的 html+css+js 的模式。這章，我們來講解這部分內容。另外我的博客即將同步至騰訊雲+社區，邀請大家一同入駐。
打包項目
進入到我們的項目根目錄
d: cd vueworks/my-vue
然后運行如下代碼，進行打包：
npm run build
結果如下：
現在我們已經把項目打包好，打完好的項目默認位置在/dist文件夾里。
我們從打包時的cmd的日志來看，里面有很多的map文件的生成，由於截圖有限，上面只是截取了結尾，大家可以向上滾動一下，就可以看到，如果項目比較大的時候，這些文件一個是比較大，另一個就是編譯比較慢。所以我們把這些map文件去掉。
去掉 map 文件
打開 /config/index.js 文件，找到其中的productionSourceMap: true，大根在build下。默認是true，修改為false：
productionSourceMap: false,
然后重新打包
npm run build
大家可以看日志，這次map文件已經沒有了，到這里我們就完成了項目的打包。上面有個Tip，提示我們打包完的項目，必須要在http server下才能運行。
安裝http server
我們進入 dist 文件夾，然后啟動一個 http 服務，來看看可以不可以訪問。你可能不知道如何啟動這樣一個 http 服務，或者，你現在已經到 apache 里面去進行配置去了。不用那么麻煩，我們有 nodejs 環境，只要全局安裝一個 http-server 服務就好了呀。
npm install http-server -g
在安裝的過程，大家可以用cnpm來代替npm。在windows上安裝完，直接就可以運行了。切換到dist目錄，運行
http-server -p 3000
如果你是嚴格按照我的教程來的，那么現在已經可以順利的跑起來了。我們在瀏覽器中輸入 http://127.0.0.1:3000 就應該可以訪問了。當然，會報錯，說是接口找不到，404錯誤。因為我們把接口給通過代理的方式開啟到了本地，但是這里我們並沒有開啟代理，所以就跑不起來了。很正常的。這是因為示例的接口的問題。實際開發你還要按照我的這個做。只不過，最終代碼放到真實的服務器環境去和后端接口在一個 http服務下面的話，就不存在這個問題了。
將項目打包到子目錄
剛剛，我們是將文件，打包為根目錄訪問的。也就是說，必須在 dist 文件夾下面啟動一個服務，才能把項目跑起來。
但是我們開發的大多數項目，可能是必須跑在二級目錄，甚至更深層次的目錄的。怎么做呢？
我們編輯 config/index.js 文件，找到assetsPublicPath: '/'，把/修改為我們的子目錄的路徑就行了，這里我要放到wemz，於是，我修改為如下代碼：
assetsPublicPath: '/wemz/',
然后，重新運行
npm run build
還記得，我們在項目文件夾中用 npm run dev 就可以開啟一個 http 服務嗎？並且那里，我們還代理了接口的。我們就這么做。然后我們訪問二級目錄 /dist/ 我們就可以看到效果了。
注意，我訪問的不是根目錄，而是 /wemz/ 這個子目錄哦，這里是訪問的我們打包的文件的。雖然實際生成的文件還是在dist目錄里，但是wemz這個目錄就可以訪問了。將來也可以直接將dist目錄下的所有文件復制到所有服務器上的/wemz的目錄里。
最后附上代碼的git：https://gitee.com/isoftforce/vue-sample.git
忠心感謝FungLeo，是你們無私的奉獻，才讓我們有了學習的參考，以下是地址：
http://blog.csdn.net/FungLeo/article/details/77606216