账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    Vue 服务器渲染偶尔会出现css没有注入页面,导致浏览器开始显示的瞬间无样式。
    53
    0

    我将vue-cli3生成的单页面应用,改造成服务器渲染项目,打包后放到了Egg.js下做单页面服务器渲染。但是组件会偶尔在服务器渲染时没有注入css,导致浏览器开始显示的瞬间无样式,然后组件加载完成会恢复。将出问题的组件稍微做一下修改,比如加个空格。重新打包。这个组件就可以正常注入css了。这个问题应该如何修复呢?

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 劳资女王范 普通会员 1楼

      这个问题可能是由于Vue服务器渲染时CSS的注入没有正确完成导致的。以下是一些可能的解决方案:

      1. 优化CSS文件:确保你的CSS文件没有过大,过长,或者包含大量的图片等资源。浏览器需要更长的时间来加载和渲染这些资源,这可能会导致样式延迟。

      2. 使用CSS预处理器:如Sass或Less,它们可以在服务器端进行计算和渲染,可以有效地减少CSS的延迟。

      3. 使用CSS异步加载:可以使用异步加载CSS的方式,比如在Vue组件中使用async/await,这样在组件渲染完成后,CSS才能被注入到页面上。

      4. 验证CSS注入:在Vue服务器端,可以使用css-loader来验证CSS注入的正确性。这个模块可以在服务器端检测CSS的错误。

      5. 使用CSS库:如Material-UI,它包含了一些预定义的CSS样式,可以大大减少CSS的编写量。

      6. 优化图片资源:如果你的图片资源非常大,可能会影响页面的加载速度。你可以尝试使用懒加载技术,只在用户滚动到图片区域时才加载图片。

      7. 服务器端样式管理:如果你的服务器需要处理大量的CSS文件,你可能需要使用一些服务器端的样式管理工具,如Gulp或Webpack。这些工具可以帮助你管理和发布CSS文件。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部