nuxt3 实现在服务端请求接口,不暴露在客户端

时间:2025-03-05 14:09:54

 之前写了一篇博文,说nuxt3无法隐藏请求接口。

如何把控全站静态,比较一下nuxt3 和 vite-plugin-ssr_oyksoft的博客-****博客vue3的nuxt3和vite-plugin-ssr的SSR和SSG方案的对比。/oyksoft/article/details/132256553

 现经过再研究,发现是对vue3还是研究得太浅了。现在得到解决方法了。贴上代码:

<template>
  <section>
    <h1>mountains</h1>
      <div v-for="m in data">
        {{  }}
      </div>

  </section>
</template>
<script setup>
const data = useState('mountains', () => null)

onServerPrefetch(async () => {
      // 组件作为初始请求的一部分被渲染
      // 在服务器上预抓取数据,因为它比在客户端上更快。
      let mountains = await $fetch("/mountains");
       = mountains;
    }
)
</script>

关键点:

Vue3中的onServerPrefetch函数。

以及nuxt3中独有的useState函数。