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-11-17 09:50:32

    android开发怎样让悬浮Activity只是隐藏而不销毁

    android在mainfest中给Activity添加一个属性 android:theme="@android:style/Theme.Dialog",可以使Activity悬浮在其它窗口上面,在布局中可以设置activity的大小,当点击悬浮Activity边缘以外区域时,Activity会消失,观察消失时其生命周期会发现执行了finish()方法从而执行了onDestroy方法。有时我们只是需要将Activity隐藏,并不销毁,此时可以重写finish方法,如下:

  • 2020-11-17 09:56:02

    uni-app直接用webiew打开本地js资源

    如果再结合activity不销毁,隐藏的方法,像里面传递参数,来改变页面,不销毁webview,我发现这样比原生的都要快。这样又能用于app端,又能生成小程序,何乐而不为

  • 2020-11-17 09:59:05

    在线图片取色器工具

    不知道为啥,现在idea的取色工具怎么都不好使了,给开发人员反映过,都一年了有没修复咋地。 网上搜到一个取色工具,把图片传上去,就可以点击取色。不错。