nuxtjs判断前端渲染或者禁止后端渲染

2020-02-20 18:34:07

有时候后端渲染会出现问题，我们要屏蔽掉后端渲染。

js代码判断前后端


Nuxt v1.4.0文档中的官方指南如下：https：//nuxtjs.org/faq/window-document-undefined#window-or-document-undefined-

如果需要指定仅在客户端导入资源，则需要使用process.browser变量。

例如，在.vue文件中：

if (process.browser) {
  require('external_library')}

如果在多个文件中使用此库，我们建议通过nuxt.config.js将其添加到供应商包中：

build: {
  vendor: ['external_library']}


html代码判断前后端，可参考nuxtjs文档，https://nuxtjs.org/api/components-client-only/


<template>  <div>    <sidebar />    <client-only placeholder="Loading...">      <!-- this component will only be rendered on client-side -->      <comments />    </client-only>  </div></template>


有时候import引入的组件会自动运行，导致后端渲染崩溃，我们要采取动态的加载import来解决这个问题。

我采取了下面这个方法。

var name = 'system';
var myComponent =() => import('../components/' + name + '.vue');
var route={
  name:name,
  component:myComponent


  • 精彩推荐

  • 2017-02-16 08:09:01

    HTML中PRE和p的区别

    pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 <pre> 标签的一个常见应用就是用来表示计算机的源代码。

  • 2017-02-16 15:14:14

    动态加载js和css

    开发过程中经常需要动态加载js和css，今天特意总结了一下常用的方法。

  • 2017-02-17 17:11:24

    mysql插入数据后返回自增ID的方法c

    产生的ID 每次连接后保存在服务器中。这意味着函数向一个给定客户端返回的值是该客户端产生对影响AUTO_INCREMENT列的最新语句第一个 AUTO_INCREMENT值的。这个值不能被其它客户端影响，即使它们产生它们自己的 AUTO_INCREMENT值。这个行为保证了你能够找回自己的 ID 而不用担心其它客户端的活动，而且不需要加锁或处理