如何使用服务器端渲染在 vue/nuxt 中隐藏客户端的代码？答案

【问题标题】：How to hide code from client side in vue/nuxt, using Server Side Rendering?如何使用服务器端渲染在 vue/nuxt 中隐藏客户端的代码？
【发布时间】：2022-09-28 17:49:20
【问题描述】：

我正在尝试在服务器端进行一些处理，我不想在客户端看到这些处理。

我已成功尝试使用fetch 或asyncData 填充状态，但我不希望随后的过程在浏览器上可用。

例如：

<template>
  // ...
</template>

<script>
import ...

export default {
  layout: \'layout1\',

  name: \'Name\',

  components: { ... },

  data: () => ({ ... }),

  computed: { ... },

  async asyncData({ store }) {

    const news = await axios.get(
      \'https://newsurl.xml\'
    ).then(feed =>
         // parse the feed and do some very secret stuff with it
         // including sha256 with a salt encryption
    )
    store.commit(\'news/ASSIGN_NEWS\', news)
  }
}
</script>

我希望asyncData（或fetch）中的代码在客户端不可见。

任何建议将不胜感激。

也许您可以随时获取nuxtServerInit() 中的数据
@DengSihan 这很有趣，谢谢，我会检查一下。这是作为存储文件中的操作运行的，对吗？我在上面

标签： vue.js nuxt.js server-side-rendering

【解决方案1】：

您可以使用onServerPrefetch 钩子。

onServerPrefetch(async () => {
  const news = await axios.get(
  'https://newsurl.xml'
).then(feed =>
     // parse the feed and do some very secret stuff with it
     // including sha256 with a salt encryption
)
  this.$store.commit('news/ASSIGN_NEWS', news)
});

【讨论】：