vue項目的history模式

最近使用vue做的大屏看板項目碰到的路由問題，在此記錄一下。

Vue-router 中有hash模式和history模式，vue的路由默認是hash模式，開發的單頁應用的URL都會帶有#號，不美觀，用戶不能接受且在某些場景中因為#號鏈接會被擾亂。【例如：微信頁面開發中凡是涉及充值的頁面，不能做成帶hash路由的的頁面】。當你使用 history 模式時，URL 就像正常的 url，看起來也非常美觀。不過這種模式要玩好，還需要后台配置支持。

 

問題：

開發環境下，路由不管選用hash模式還是history模式都不會出問題，但打包后放在服務器上history模式會出現頁面一片空白的情況,而且沒有資源加載錯誤的報錯信息.。

 

原因：

1、后台配置支持是否支持：history模式要玩好，是需要后台配置支持的。原理是要在服務端增加一個覆蓋你的路由內所有情況的候選資源，如果 URL 匹配不到任何候選資源，則定位到打包好的 index.html 頁面，這個頁面就是你 app 依賴的頁面。配置鏈接：https://router.vuejs.org/zh/guide/essentials/history-mode.html

2、前端沒有配置好，配置可以按照下面的步驟：

|--router/index.js

const router = new VueRouter({
  mode: 'history',
  base: ‘/WebTest/Vue/bigscreen/dist’,
  routes
})


mode配置成hostory
如果項目代碼直接放在服務器的根目錄, 那么是沒有問題的,base不需要配置。
如果項目代碼是放在服務器的子目錄,需要加一個base配置項，里面配置項目代碼在服務器內的路徑。【我的代碼放在/WebTest/Vue/bigscreen】

|--vue.config.js

module.exports = {
  //  基本路徑
  publicPath: "./",

  //  構建時的輸出目錄
  outputDir: "dist",

  //  放置靜態資源的目錄
  assetsDir: "static",
}