仅服务器端插件

Sil*_*611 5 nuxt.js

我有一个不想让客户端看到的插件。不幸的是,它总是为服务器和客户端构建的。如何防止这种情况发生?

<template>
    <div>
        Test
    </div>
</template>

<script>
    import getAll from '~/plugins/api'
    export default {
        asyncData (context, callback) {
            getAll(function(data){
                callback(null,data);
            })
        }
    }
</script>
Run Code Online (Sandbox Code Playgroud)

这是我的 .vue 文件。数据的获取正在工作,但我也可以从客户端看到我不想要的代码。

Nic*_*nec 2

也许你可以使用该context.isServer财产。
它是一个布尔值,让您知道您是否实际上是服务器端的渲染器。

<script>
import getAll from '~/plugins/api'
export default {
    asyncData (context, callback) {
        if (context.isServer) {
            getAll(function(data){
                callback(null,data);
            })
        }
    }
}
</script>
Run Code Online (Sandbox Code Playgroud)

有关 Nuxt 上下文的更多详细信息: https: //nuxtjs.org/api/context


更新:(感谢@Lanayx)

“注意:从 Nuxt.js 2.4 开始,模式已作为插件选项引入,用于指定插件类型,可能的值是:客户端或服务器。 ssr: false 将适应模式:‘客户端’,并在下一个主要版本中弃用。”

// nuxt.config.js:

export default {
  plugins: [
    { src: '~/plugins/both-sides.js' },
    { src: '~/plugins/client-only.js', mode: 'client' },
    { src: '~/plugins/server-only.js', mode: 'server' }
  ]
}
Run Code Online (Sandbox Code Playgroud)

  • 不幸的是,使用此选项插件仍然传递到客户端 (3认同)
  • @PhilippS。看起来 `mode: 'server'` 是目前正确的解决方案(https://nuxtjs.org/guide/plugins#client-side-only) (2认同)