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


  • 精彩推荐

  • 2021-01-14 06:15:04

    通过glide获取图片显示后的真正宽高

    有时候需要获取网络图片的宽高来设置图片显示的大小，很多人会直接利用Glide的加载监听去拿图片的宽高，但是这样拿到的不是图片真正的宽高，而是图片显示在ImageView后的宽高。如下：

  • 2021-01-14 09:38:57

    Chrome插件详细教程

    严格来讲，我们正在说的东西应该叫Chrome扩展(Chrome Extension)，真正意义上的Chrome插件是更底层的浏览器功能扩展，可能需要对浏览器源码有一定掌握才有能力去开发。鉴于Chrome插件的叫法已经习惯，本文也全部采用这种叫法，但读者需深知本文所描述的Chrome插件实际上指的是Chrome扩展。

  • 2021-01-14 17:07:51

    chrome.contextMenus.create不出现菜单

    主要原因是，我每次刷新玩，都复制一下右键，然而并没有出现菜单，一度颓废啊，因为demo，还有其他人的文章都是这样的。 哎，后来发现是这样的，我缺少了contexts选项。其实我是成功了，我现在只要不选择文字，直接点右键，菜单已经出现了哦。

  • 2021-01-15 13:06:08

    监控 MongoDB -

    随着MongoDB中保存的数据越来越多，对MongoDB服务状态的监控也越来越重要，经常关注服务是否健康，才能防止故障以及优化。

  • 2021-01-15 13:30:21

    MongoDb web 用户界面

    MongoDB 的 Web 界面访问端口比服务的端口多1000。 如果你的MongoDB运行端口使用默认的27017，你可以在端口号为28017访问web用户界面，即地址为：http://localhost:28017。

  • 2021-01-16 09:31:14

    Xcode两种引入图片的方法

    如果是纯代码，图片名需要手动添加@2x，@3x等倍数标识，且需要指明后缀.png，.jpg；IB添加图片的话只需要指明后缀就好，不用添加倍数标识。