在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" target="_blank" rel="external nofollow"  type="image/x-icon" />
<link href="/static/css/style.css" target="_blank" rel="external nofollow"  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

), 裡面有部分報錯問題的解決方法 ! 謝謝 !