美文网首页
nuxt.js在ssr模式下class属性渲染不正确

nuxt.js在ssr模式下class属性渲染不正确

作者: 我叫Aliya但是被占用了 | 来源:发表于2021-12-28 16:11 被阅读0次

    需求是在ssr站点接入i18n,默认中文(即供搜索引擎爬取的是中文),用户手动选择的语言存在 cookie。因部分语言下的文案太长(比如俄语)所以需要对某些样式做调整(加指定class),结果发现在打包后class没有如愿渲染:

    <div class="language" :class="curLocale">{{ curLocale }}</div>
    
    computed: { 
        curLocale() {
            return this.$i18n.locale;
        }
    }
    

    打包后渲染结果:

    <div class="language zh">en</div>
    

    就很奇怪,如果 class 和内容都是 en 也能说的过去现在这样就😱,解决方案:

    // plugins/i18n.js
    if (process.browser) {
        // 避开ssr的静态模板
        setTimeout(() => {
            app.i18n.locale = defaultLocale;
        }, 0);
    }
    

    奇技淫巧啊,不算正规解决方案。为了搞清楚原因,我创建一个什么都没有空的项目,加入一个组件:

    <template>
      <div class="box" :class="lll">{{ lll }}</div>
    </template>
    
    <script>
    export default { 
      computed: {
        lll() {
          return `T${new Date().getTime()}`;
        },
      }, 
    };
    </script>
    

    最后渲染结果: <div class="box T1640678617065">T1640678617384</div>,这莫不是 nuxt 的一个bug,或者是我理解不够透彻?

    相关文章

      网友评论

          本文标题:nuxt.js在ssr模式下class属性渲染不正确

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