在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
), 里面有部分报错问题的解决方法 ! 谢谢 !

Logo

前往低代码交流专区

更多推荐