美文网首页
Vue 项目使用 SSR 服务端渲染,打包部署后样式丢失

Vue 项目使用 SSR 服务端渲染,打包部署后样式丢失

作者: 酷酷的凯先生 | 来源:发表于2022-03-02 15:15 被阅读0次

    现在项目需要做SEO , 因为是Vue项目,所以做了改造。利用node服务端渲染,详见可点击此处

    问题来了,打包部署后,页面样式没了,或者是一加载页面是好的,但刷新下样式就没了。
    部分代码如下:

    export default {
        // 请求后端数据
        asyncData ( { store, route } ) {
            return store.dispatch( 'jt_index', { pageSize: 10, pageNum: 1 } )
        },
    }
    

    苦恼了好久,终于找到了解决办法,就是在钩子函数mounted里在延时请求数据即可,代码如下:

    export default {
        // 请求后端数据
        asyncData ( { store, route } ) {
            return store.dispatch( 'jt_index', { pageSize: 10, pageNum: 1 } )
        },
        mounted () {
            setTimeout( _ => {
                 this.$store.dispatch( 'jt_index', { pageSize: 10, pageNum: 1 } )
            }, 300)
        }
    }
    

    有时也得先清空下状态里的数据,不然也会丢失样式,整体代码如下:

    export default {
        // 请求后端数据
        asyncData ( { store, route } ) {
            return store.dispatch( 'jt_index', { pageSize: 10, pageNum: 1 } )
        },
        mounted () {
            this.$store.state.commit('jt_index_list', []);
            // 页面挂载后,再次请求后端数据
            setTimeout( _ => {
                 this.$store.dispatch( 'jt_index', { pageSize: 10, pageNum: 1 } )
            }, 300)
        }
    }
    

    虽然原理还没搞明白为啥,但解决了 SEO的问题 和 样式丢失 的问题,欢饮大家留言~~~

    相关文章

      网友评论

          本文标题:Vue 项目使用 SSR 服务端渲染,打包部署后样式丢失

          本文链接:https://www.haomeiwen.com/subject/rtzsrrtx.html