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-05-05 14:04:11

    PHP使用CURL模拟POST/GET/PUT/DELETE方式提交数据

    最近因为工作需要，调用网盘接口来上传文件，我用了CURL库, 当然在用CURL库之前必须要在php中启用 cURL 设置 可以通过使用php_info()函数来得到cURL信息，如果看不到cURL信息的话，那么需要设置PHP并开启这个库。在Windows平台下，需要改一改php.ini文件的设置，找到 php_curl.dll，并取消前面的分号注释就行了。

  • 2019-05-07 00:04:04

    Tcpdf不使用css来实现线上合同和签章，图片悬浮

    以前虽然有了解过Tcpdf的用法，但是没有实际的应用过，最近在用tcpdf的时候发现对css支持很有限，使的如果想实现类似html的种种效果都很难，而我这次要做的就是 图片悬浮在文字上方形成类似水印或者盖章的效果。

  • 2019-05-09 11:46:30

    Glide使用高级技巧（解决Glide生成缓存Key问题）

    虽说Glide将缓存功能高度封装之后，使得用法变得非常简单，但同时也带来了一些问题。 比如之前有一位群里的朋友就跟我说过，他们项目的图片资源都是存放在七牛云上面的，而七牛云为了对图片资源进行保护，会在图片url地址的基础之上再加上一个token参数。也就是说，一张图片的url地址可能会是如下格式：

  • 2019-05-13 14:34:42

    linux系统中清理MySql的日志文件，打印日志文件

    默认情况下mysql会一直保留mysql-bin文件，这样到一定时候，磁盘可能会被撑满，这时候是否可以删除这些文件呢，是否可以安全删除，是个问题。 首先要说明一下，这些文件都是mysql的日志文件，如果不做主从复制的话，基本上是没用的，虽然没用，但是不建议使用rm命令删除，这样有可能会不安全，正确的方法是通过mysql的命令去删除。