需求是在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,或者是我理解不够透彻?
网友评论