Nuxtjs中onMounted执行位置及客户端执行方案咨询

首先明确：Vue的onMounted组合式API钩子在Nuxt 3中仅会在浏览器客户端执行，服务端完全不会触发这个钩子，所以服务端控制台看不到日志是正常的。

你现在客户端控制台也看不到日志，可能是这些原因：

• 页面路由未正确匹配，组件根本没被渲染
• 浏览器控制台过滤了日志（比如只显示"Errors"或"Warnings"，没选"All"或"Verbose"）
• Nuxt应用处于静态生成（SSG）模式下，页面被预渲染但客户端hydrate过程出现异常

要确保代码在客户端执行，有几种可靠方式：

方式1：正确使用onMounted（推荐） #

确认组件正常渲染、控制台未过滤日志的前提下，你的代码本身是正确的，onMounted会在客户端组件挂载完成后触发：

<script setup lang="ts">
onMounted(() => {
    console.log("HELLO!!!")
})
</script>

<template>
    <div>
        <h1>Hello Index</h1>
    </div>
</template>

方式2：用process.client显式判断 #

如果需要更明确地限定代码仅在客户端运行，可以加上process.client条件判断，这是Nuxt提供的环境变量：

<script setup lang="ts">
if (process.client) {
  onMounted(() => {
    console.log("HELLO!!!")
  })
  // 若不需要等待组件挂载，也可以直接执行：
  // console.log("HELLO!!!")
}
</script>

方式3：使用ClientOnly组件包裹 #

如果是组件级别的客户端代码隔离，可以用Nuxt提供的<ClientOnly>组件，内部的内容只会在客户端渲染：

<template>
    <div>
        <h1>Hello Index</h1>
        <ClientOnly>
          <div>仅客户端可见的内容</div>
        </ClientOnly>
    </div>
</template>

<script setup lang="ts">
// 若在ClientOnly包裹的子组件中使用onMounted，同样只会在客户端执行
</script>

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