Vue 生產環境部署

簡要：繼上次搭建vue環境後，開始着手vue的學習;爲此向你們分享從開發環境部署到生產環境（線上）中遇到的問題和解決辦法，但願可以跟各位VUE大神學習探索，若是有不對或者好的建議告知下；*~*！

1、如何打包，部署到生產環境（線上）

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）

 

2、不加載組件（非根目錄）

緣由：路由path錯誤

 

（路由配置圖）

3、刷新頁面（刷新路由）出現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）都會跳轉到上述指定路徑；詳細解決辦法請看下文；

4、任意不存在頁面（404）都跳轉到指定路徑（針對解決404頁面後）

 

我的解決方法：製做404頁面的組件；

在routes.js配置，配置增長一下路由

{ path: '*', component: defaults }

以上就是個人分享，若是個人這篇文章解決了你的問題，麻煩你點個贊讓更多一樣狀況的朋友，能更快的解決問題！