Vue 生產環境部署

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，所以會404；

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）
版權所有，歡迎保留原文鏈接進行轉載：)