解決使用vue-cli生成項目後項目地址自動添加#號的問題

vue-router官網https://router.vuejs.org/zh/guide/

vue的路由在默認的hash模式下,url會帶有一個#,不美觀,而且在微信分享,授權登錄等都會有一些坑.所以history模式（不帶#號）也會有一些應用場景.

將路由配置成history模式，代碼如下：

1 2 3 4 5 6 7 8 9 10

export default new Router({     mode: 'history',     routes: [         {             path: '/',             name: 'Hello',             component: Hello         }     ] })

由於vue-router 默認 hash 模式變爲 history 模式，踩得坑還真有點多。

問題一：變爲history模式，子路由在刷新情況下會出現樣式變亂的情況，解決方法如下：

直接修改index.html文件中的靜態文件引入路徑就OK了

修改前：

1	<link rel="stylesheet" href="./static/css/base.css">

修改後：

1	<link rel="stylesheet" href="/static/css/base.css">

修改原理：

./ 是指用戶所在的當前目錄（相對路徑）；

/ 是指根目錄（絕對路徑，項目根目錄），也就是項目根目錄；

對於hash模式，根路徑是固定的，就是項目的根目錄，但是history模式下，以 / 開頭的嵌套路徑會被當作根路徑，所以使用“./”引入文件，就會找不到文件了，因爲文件本身就是在項目根目錄下的，並不在嵌套路徑這個目錄下。

總結，無論hash模式還是history模式，可以直接使用“/”從項目根目錄引入靜態文件。

更加詳細的介紹https://www.cnblogs.com/xyyt/p/7718867.html

問題二：vue的路由在默認的hash模式下,默認打包一般不會有什麼問題，而history模式打包後回出現頁面一片空白的情況,而且沒有資源加載錯誤的報錯信息.

參考文章https://www.jb51.net/article/142831.htm

https://blog.csdn.net/g1531997389/article/details/79154179