Vue2.0 生産環境部署
簡要：繼上次搭建vue環境後，開始着手vue的學習;為此向大家分享從開發環境部署到生産環境（線上）中遇到的問題和解決辦法，希望能夠跟各位VUE大神學習探索，如果有不對或者好的建議告知下；~！
一、如何打包，部署到生産環境（線上）
npm run build
1. dist 檔案結構（編譯後，生成在vue目錄下）
- static （存放css/js/image)
- index.html （編譯後頁面）
2. 部署生産環境（以Thinkphp為例）
（1） 建立子項目，建立控制器建立index方法；執行個體化模闆；将編譯後index.html存放在對應的視圖下；
（2） 修改vue配置檔案（dist下status檔案，預設存放在項目的根目錄；若無須改變請忽略此步驟！）
二、不加載元件（非根目錄）
原因：路由path錯誤
三、重新整理頁面（重新整理路由）出現404
1. 為什麼
vue路由設定 HTML5 History 模式，直接通路/重新整理url會被http server直接解析到該檔案路徑（被相應的架構接管），但vue的路由是虛拟的（隻是告知編譯後index.html檔案追尋到相應的路徑），并不能直接找到這個file，是以會；
2. 怎麼做（針對nignx；具體參考：HTML5 History 模式）
location / {
root （index.html存在目錄路徑，比如：/admin/tpl/index/）
try_files $uri $uri/ /index.html;
}
單配置此步驟，任意不存在頁面（404）都會跳轉到上述指定路徑；詳細解決辦法請看下文；
四、任意不存在頁面（404）都跳轉到指定路徑（針對解決404頁面後）
個人解決方法：制作404頁面的元件；在routes.js配置，配置增加路由
{ path: '*', component: defaults }
作者：不動峰
出處：http://www.jianshu.com/users/c0abc9c5f51e/latest_articles
部落格園：http://www.cnblogs.com/mylly/
備注：現承接企業大型網站與接口開發，有意向的朋友請聯系（QQ：857280707）
版權所有，歡迎保留原文連結進行轉載：)