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


  • 精彩推荐

  • 2020-03-01 19:00:46

    触发onclick事件元素的获取

    自动生成元素的onclick事件 event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素

  • 2020-03-03 09:46:42

    JS实现HTML标签转义及反转义

    简单说一下业务场景，前台用户通过input输入内容，在离开焦点时，将内容在div中显示。 这时遇到一个问题，如果用户输入了html标签，则在div显示中，标签被解析。 由于是纯前端操作，不涉及后端，因此需要通过js对输入内容进行转义。

  • 2020-03-03 09:51:38

    写一个可插入自定义标签的 Textarea 组件

    为了实现这个功能，我最先想的是改造一个 <textarea> 然后我想到了 contenteditable (链接指向 mozilla.org) 这一属性 这是一个 html5 的属性，可以让元素内容可编辑

  • 2020-03-03 20:18:21

    Vuepress如何做到在 Markdown 中使用 Vue 语法

    在 vuepress 刚出时，我就觉得这是个很值得追更的开源项目。果不其然，里面众多的前端编程技巧让我受益良多。 于是在周末这种日子里，人家追剧我追码。 今天，我就和大家分享下 vuepress 是如何做到在 Markdown 中使用 Vue 语法的。