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-04-28 10:47:16

    currentColor css 的使用

    以前我们在如何动态设置伪元素的颜色上非过不少心思,看完下面的文章,你就会超级见到那的设置伪元素的颜色了。

  • 2020-04-28 10:48:39

    使用currentColor设置SVG样式

    css自己也又很多变量哦,大家还要多多学习哦。CSS中的变量很有用,因为它们允许我们写更多DRY(不再自我重复,也就是不需要一直写重复内容的代码)代码。它们对于管理和维护大型项目也有非常好用,因为它们包含了大量重复的值。

  • 2020-04-29 20:57:07

    mac卸载avast

    第一种就是卸载。打开主界面,在左上角Avast一栏中选择卸载。卸载完之后要么再装回去,要么去找找别的杀软吧

  • 2020-05-06 14:43:53

    bootstrap @media尺寸

    超大屏,1100分辨率,880分辨率,720分辨率,440分辨率以下