Nuxt.js 让函数只在浏览器运行,在服务器端不执行

如何让js只运行在浏览器客户端,服务器端不执行？

其实，mounted 钩子，就是在浏览器端运行的了。

服务器端运行的声明周期钩子只有：beforeCreate, created

其他的生命周期钩子，都只在客户端（浏览器）执行了，服务器端不执行。

nuxt js 让部分代码只在浏览器运行

1
2
3
if (process.browser) {
  // only run in client (browser)
}

nuxt.js 让部分代码只能在服务器端运行

1
2
3
if (process.server) {
  console.log('only running in server')
}

nuxt 如何让某些js只在浏览器环境才打包进去

1
2
3
4
5
6
7
8
// 只在浏览器使用的时候，才把某js打包进去。
function example () {
  if (!process.BROWSER_BUILD) {
      require('external_library')
  }
  // do something only run in client(browser)
}

ClientOnly组件

Nuxt 提供了 <ClientOnly> 专门用于仅在客户端渲染组件的组件；

要仅在客户端导入组件，请在仅客户端插件中注册该组件。

1
2
3
4
5
6
7
8
<template>
  <div>
    <ClientOnly>
      <!-- 此组件仅在客户端显示 -->
      <Comments />
    </ClientOnly>
  </div>
</template>