簡要：繼上次搭建vue環(huán)境后，開始著手vue的學(xué)習(xí);為此向大家分享從開發(fā)環(huán)境部署到生產(chǎn)環(huán)境（線上）中遇到的問題和解決辦法，希望能夠跟各位VUE大神學(xué)習(xí)探索媒鼓，如果有不對或者好的建議告知下梦鉴；*~*！
一十电、如何打包知押，部署到生產(chǎn)環(huán)境（線上）
npm run build
1. dist 文件結(jié)構(gòu)（編譯后，生成在vue目錄下）
- static （存放css/js/image)
- index.html （編譯后頁面）
2. 部署生產(chǎn)環(huán)境（以Thinkphp為例）
（1） 建立子項(xiàng)目鹃骂，創(chuàng)建控制器建立index方法台盯；實(shí)例化模板；將編譯后index.html存放在對應(yīng)的視圖下畏线；
（2） 修改vue配置文件（dist下status文件静盅，默認(rèn)存放在項(xiàng)目的根目錄；若無須改變請忽略此步驟Ｇ夼埂）
（config文件static存在路徑修改蒿叠，配置文件路徑：config\index.js）
二、不加載組件（非根目錄）
原因：路由path錯誤
三蚣常、刷新頁面（刷新路由）出現(xiàn)404
1. 為什么
vue路由設(shè)置 HTML5 History 模式市咽，直接訪問/刷新url會被http server直接解析到該文件路徑（被相應(yīng)的框架接管），但vue的路由是虛擬的（只是告知編譯后index.html文件追尋到相應(yīng)的路徑）抵蚊，并不能直接找到這個file施绎，所以會404；
2. 怎么做（針對nignx贞绳；具體參考：HTML5 History 模式）
location / {
? ? ? ? root （index.html存在目錄路徑谷醉，比如：/admin/tpl/index/）
? ? ? ?try_files $uri $uri/ /index.html;
}
單配置此步驟，任意不存在頁面（404）都會跳轉(zhuǎn)到上述指定路徑冈闭；詳細(xì)解決辦法請看下文俱尼；
四、任意不存在頁面（404）都跳轉(zhuǎn)到指定路徑（針對解決404頁面后）
個人解決方法：制作404頁面的組件萎攒；
在routes.js配置号显，配置增加一下路由
{ path: '*', component: defaults }
作者：不動峰
出處：http://www.reibang.com/users/c0abc9c5f51e/latest_articles
博客園：http://www.cnblogs.com/mylly/
備注：現(xiàn)承接企業(yè)大型網(wǎng)站與接口開發(fā)臭猜，有意向的朋友請聯(lián)系（QQ：857280707）
版權(quán)所有，歡迎保留原文鏈接進(jìn)行轉(zhuǎn)載：)
