在vue预渲染项目在history模式下刷新无法正常页面

在vue预渲染项目在history模式下刷新无法渲染页面的问题刷新css样式不生效报错404

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

页面样式全乱了,看下页面请求加载的静态文件,所有静态文件都是404;
在vue预渲染项目在history模式下刷新无法正常页面_第1张图片
问题解决
在vue预渲染项目在history模式下刷新无法正常页面_第2张图片
修改为



即可成功加载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
), 里面有部分报错问题的解决方法 ! 谢谢 !

你可能感兴趣的:(vue预渲染,history)