跟着杨村长学nuxt3--window 报错处理(4)继上一篇跟着杨村长学nuxt3,每天收获一点点(3) 知识点 La

知识点

这边由于Nuxt3刚出来,问题还很多,比如node14的版本在nuxt.config.ts 中配置buildModules时就会宕机,但在node16中可以, 所以有必要记录一下环境配置

Nuxt3的布局方式和Nuxt2有点不一样,之前的<nuxt class="page" />换成了<slot />

首先根目录下创建layouts, 然后取名一个组件(名字随意),我取名default.vue

<template>
  <div class="container">
    <sidebar />
    <main>
      <navbar />
      <slot />
    </main>
  </div>
</template>

然后sidebar,navbar 我是放到components中的,这样子就作为公共组件直接用起来了,不用导入,至于两个组件的代码就是常规写法,有兴趣的小伙伴可以直接到底下找到git地址down下来测试, 这里篇幅问题就不写了,布局好后,贴一个图

顶部可以设置各种路由了,后面测试的所有项目都放里面,嘿嘿!!

为什么做这个测试呢?因为之前我装个一个vue3制作的插件,竟然不能用,具体我也没细查,反正就是报错,整个页面崩掉了, 那么另外测试一下,目前我维护的一个插件是不是有同样问题

果然插件装上去就报错了, 提示window没有定义, 于是去插件看了一下,确实有一个props在定义默认值时default: window.devicePixelRatio || 1用到了,因为服务端没有window这个对象, 于是尝试修改一番

在window前面加&符号判断, 写成default:window&& window.devicePixelRatio || 1, 打包测试, 依然报错, 大概是Nuxt3检测到有window, 然后直接就报500
果断把这行注释掉,然后在使用的地方再传

  onMounted(() => {
      ratio = props.ratio || window.devicePixelRatio || 1
     ....
    })

这样子处理后, 打包, 果然不再报错,onMounted一定是在浏览器加载后再执行的, 那个时候已经有window对象了,所以我的处理办法是,对于有window对象的, 所有都提到onMounted中处理, 把插件修改提交,哈哈!我第一个支持服务端渲染的插件就改造完了

最后贴一个效果图