Nuxt3执行npm run generate时能否在页面加载前读取Cookie？

执行npm run generate时，能否在页面开始加载前从Cookie读取数据？

示例1：页面头部读取用户邮箱 #

代码如下：

{{profile.email}}
<script setup> 
import {useCookie} from "nuxt/app"; 
let profile = useCookie('user'); 
</script>

现象：页面加载完成时profile.email为空，1秒后才显示真实邮箱。

示例2：通过Cookie设置网站语言（langCookie值为"ru"） #

代码如下：

export default defineNuxtPlugin(({ vueApp }) => {
    function getLang(lang){
        let useCookie1 = useCookie("langCookie"); // 初始为null
        if(useCookie1 && useCookie1.value!=null ){
            if(useCookie1.value === "en" ||  useCookie1.value ==="eng"){
                return "en";
            }else if(useCookie1.value === "ru" || useCookie1.value === "rus"){
                return "ru";
            }else {
                return "en"
            }
        }else { return "en"} // 首次执行返回en
    }
    var a = getLang();

    const i18n = createI18n({
        legacy: false,
        globalInjection: true,
        locale:a,
        warnHtmlInMessage: 'off',
        warnHtmlMessage: false,
        messages: {
            en,ru
        }
    })

    vueApp.use(i18n)
})

现象：页面初始加载为英文，1秒后才切换为正确的俄语。

首先明确：npm run generate生成的是静态站点（SSG），构建阶段在服务器/本地完成，此时完全无法访问用户浏览器的Cookie——Cookie存储在用户客户端，构建流程根本触达不到。你遇到的延迟显示问题，本质是静态HTML中没有Cookie相关数据，页面加载后客户端JS才执行useCookie读取数据并更新DOM，因此产生延迟。

针对示例2（i18n语言设置）的解决方案 #

不要在Nuxt插件初始化阶段直接调用useCookie，改用客户端原生document.cookie在页面最早期读取数据，同时结合useCookie做响应式监听：

export default defineNuxtPlugin(({ vueApp }) => {
    // 客户端直接读取Cookie，避免初始化延迟
    function getInitialLang() {
        const cookieValue = document.cookie.split('; ').find(row => row.startsWith('langCookie='))?.split('=')[1];
        if (cookieValue) {
            if (['ru', 'rus'].includes(cookieValue)) return 'ru';
            if (['en', 'eng'].includes(cookieValue)) return 'en';
        }
        return 'en';
    }

    // 仅在客户端环境执行初始语言读取
    const initialLocale = process.client ? getInitialLang() : 'en';
    
    const i18n = createI18n({
        legacy: false,
        globalInjection: true,
        locale: initialLocale,
        warnHtmlInMessage: 'off',
        warnHtmlMessage: false,
        messages: {
            en, ru
        }
    })

    // 客户端挂载后，监听Cookie变化实现响应式更新
    if (process.client) {
        const langCookie = useCookie('langCookie');
        watch(langCookie, (newVal) => {
            if (newVal) {
                const lang = ['ru', 'rus'].includes(newVal) ? 'ru' : 'en';
                i18n.global.locale.value = lang;
            }
        }, { immediate: true });
    }

    vueApp.use(i18n)
})

针对示例1（页面头部用户信息）的解决方案 #

避免直接在模板中渲染未初始化的Cookie数据，先通过document.cookie初始化数据，同时添加加载状态：

<template>
  <div>
    <span v-if="profile">{{ profile.email }}</span>
    <span v-else>加载中...</span>
  </div>
</template>

<script setup>
import { useCookie } from "nuxt/app";
let profile = useCookie('user');

// 客户端初始化时直接读取Cookie赋值
if (process.client) {
  const userCookie = document.cookie.split('; ').find(row => row.startsWith('user='))?.split('=')[1];
  if (userCookie) {
    profile.value = JSON.parse(userCookie);
  }
}
</script>

核心原理总结 #

1. SSG构建阶段无法访问用户Cookie，所有Cookie相关逻辑必须在客户端运行时执行。
2. 直接使用document.cookie读取数据，能绕过useCookie的响应式初始化延迟，解决页面加载时的空白/错误显示问题。
3. 结合useCookie和watch，可实现Cookie变化时的响应式更新，兼顾初始化速度与后续动态需求。

内容的提问来源于stack exchange，提问作者mobiw