文章出處
文章列表
簡要：繼上次搭建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文件，默認存放在項目的根目錄；若無須改變請忽略此步驟！）
(index.html 文件目錄)
（config文件static存在路徑修改，配置文件路徑：config\index.js）
二、不加載組件（非根目錄）
原因：路由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 }
以上就是我的分享，如果我的這篇文章解決了你的問題，麻煩你點個贊讓更多同樣情況的朋友，能更快的解決問題！
文章列表
全站熱搜
留言列表
