在vue預渲染項目在history模式下刷新無法正常頁面

在vue預渲染項目在history模式下刷新無法渲染頁面的問題刷新css樣式不生效報錯404

const router = new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            component: mall,
            name: 'mall'
        },
    ]
})

頁面樣式全亂了，看下頁面請求加載的靜態文件,所有靜態文件都是404；

問題解決

修改爲

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link href="/static/css/style.css" rel="stylesheet">

即可成功加載css

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

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

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

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

若遇到其他報錯問題 ,請移步至我的博客
(
https://blog.csdn.net/weixin_44781409/article/details/89356758
https://blog.csdn.net/weixin_44781409/article/details/90671169
https://blog.csdn.net/weixin_44781409/article/details/90670731
https://blog.csdn.net/weixin_44781409/article/details/90670040
), 裏面有部分報錯問題的解決方法 ! 謝謝 !