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

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

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

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

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

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

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

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

修改前：

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

修改后：

<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