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


  • 精彩推荐

  • 2019-08-22 19:14:21

    Android Studio 3.5最新特性

    Android Studio（以下简称为AS） 3.5正式版终于发布了，从第一个bate版本发布到正式版本，历时三个半月。AS一直以来被开发者吐槽，因此谷歌也放慢了版本的变化，对测试版本进行大力度的优化，提高了稳定性。从3.3版本开始，谷歌启动了名为Project Marble的计划，意为谷歌团队致力于使集成开发环境（IDE）的基本功能和流程变得坚如磐石，同时精炼和完善面向用户的功能。而AS 3.5则是Project Marble主要成果的版本，下面来介绍主要成果。

  • 2019-08-27 05:43:13

    Laravel 门面自动补全工具 laravel-ide-helper

    当我们在 PhpStorm 编辑器中，开发 Laravel 框架的项目时，很多类方法都不能自动补全和定位，比如 Facade 门面的方法，DB::table()、Route::get() 等。

  • 2019-08-28 08:28:36

    Js apply,call方法详解,及其apply()方法的妙用

    在给对象参数的情况下,如果参数的形式是数组的时候,比如apply示例里面传递了参数arguments,这个参数是数组类型,并且在调用Person的时候参数的列表是对应一致的(也就是Person和Student的参数列表前两位是一致的) 就可以采用 apply , 如果我的Person的参数列表是这样的(age,name),而Student的参数列表是(name,age,grade),这样就可以用call来实现了,也就是直接指定参数列表对应值的位置(Person.call(this,age,name,grade));

  • 2019-08-28 08:49:47

    Nginx + fastcgi + php 的原理与关系

    CGI对每个请求会parse一遍对应脚本的配置文件（如php.ini）， 加载配置和扩展，初始化执行环境，性能非常差，所有有了下面的流程：

  • 2019-08-28 09:23:15

    php单例模式

    单例模式，是一种常见的软件设计模式。在应用这个模式时，单例对象的类必须保证只有一个实例存在。