Question

我有一个nuxt / vue插件，其基本功能是动态告诉我断点或窗口宽度。

import Vue from 'vue';

const breakpoint = {
  install: (Vue, { breakpoints }) => {
    Vue.prototype.$bp = Vue.observable({
      windowWidth: 0,
      isMobile: false,
      isTablet: false,
      isDesktop: false,
    })
    const updateOnResize = () => {
      Vue.prototype.$bp.windowWidth = window.innerWidth;
      Vue.prototype.$bp.isMobile = window.innerWidth < breakpoints.mobile;
      Vue.prototype.$bp.isTablet = window.innerWidth >= breakpoints.mobile && window.innerWidth < breakpoints.tablet;
      Vue.prototype.$bp.isDesktop = window.innerWidth >= breakpoints.tablet;
    }
    updateOnResize();
    window.addEventListener('resize', updateOnResize);
    window.addEventListener('orientationchange', updateOnResize);
  },
};

Vue.use(breakpoint, {
  breakpoints: {
    mobile: 768,
    tablet: 1024,
  },
});

在我的nuxt.config中，我仅在客户端上运行此插件

{ mode: 'client', src: '~/plugins/breakpoint.js'}。

在我引用$bp变量的模板中，组件包装在nuxt <no-ssr>标记中。

例如

 <no-ssr>
   <vue-modal
    :pivot-y="$bp.windowWidth < 992 ? 1 : 0.5"
    :transition="$bp.windowWidth < 992 ? 'fadeUp' : 'fade'"
   </vue-modal>
 </no-ssr>

当我使用这种模式在页面上进行硬刷新（ssr）时，它中断了，因为它说$bp是undefined。我的问题是：

<no-ssr>在做什么？

我的理解是，此标记内的代码在ssr端将被忽略，但我显然是错误的。

是否读取了服务器上模板的一部分，但只是未呈现？

在服务器端渲染期间如何访问模板中的客户端插件？

谢谢！

引用客户端插件var的代码在Nuxt <no-ssr>标签内部

0 个答案: