• • 2021年8月更新**

未定义窗口错误是由于nodejs服务器端脚本无法识别仅浏览器自带的窗口对象而导致的。
对于nuxt v2.4，您不需要添加process.client或process.browser对象。
通常你的nuxt插件目录结构如下：

• • 一米二米一x**

import Vue from 'vue';
// your imported custom plugin or in this scenario the 'vue-session' plugin
import VueSession from 'vue-session';

Vue.use(VueSession);

然后在**nuxt.config.js**中，您可以使用以下两种方法向项目添加插件：

• • 方法1：**

将值为**'client'的mode**属性添加到插件中

plugins: [
  { src: '~/plugins/myplugin.js', mode: 'client' }
]

• • 方法2：（我认为更简单）**

用扩展名***. client. js*重命名你的插件，然后将其添加到nuxt. config. js**plugins中的插件。Nuxt 2.4.x将根据所使用的扩展名识别插件扩展名是呈现在服务器端 * .server.js * 还是客户端 * .client.js *。
注意：添加不带 * .client.js * 或 * .server.js * 扩展名的文件将在客户端和服务器端呈现插件。

plugins: ['~/plugins/myplugin.client.js']

在服务器端呈现端没有窗口对象，但快速修复方法是检查process.browser。

created(){
    if (process.browser){
      console.log(window.innerWidth, window.innerHeight);
    }
  }

这是一个有点草率的方法，但是它是有效的。这里有一个关于如何使用plugins to do it better的很好的文章。

这在nuxt文档和常见问题解答中都有介绍。首先你需要把它做成一个插件。其次你需要把你的插件做成客户端的

plugins: [
  { src: '~/plugins/vue-notifications', mode: 'client' }
]

此外，供应商是不使用nuxt2.x和您的进程。客户端不需要，如果其在插件与ssr假

在Nuxt 3中，process.client的用法如下：

if (process.client) {
  alert(window);
}

如果你已经尝试了这里的大多数答案，但它对你不起作用，看看这个，我在使用Paystack（一个支付包）时也遇到了同样的问题。
创建一个扩展名为.client.js的插件，以便仅在客户端呈现。因此，在plugins文件夹中，创建一个文件“vue-session.client.js”作为插件，并放入以下代码

import Vue from 'vue'
import VueSession from 'vue-session'
//depending on what you need it for
Vue.use(VueSession)
// I needed mine as a component so I did something like this
Vue.component('vue-session', VueSession)

因此在nuxt.config.js中，根据插件路径注册插件

plugins:[
...
{ src: '~/plugins/vue-session.client.js'},
...
]

在index.vue或任何你想使用包的页面中...导入已挂载的包，这样当客户端页面挂载时它就可用了...

export default {
 ...
 mounted() {
   if (process.client) {
     const VueSession = () => import('vue-session')
   }
 }
...
}

您可以检查您是使用客户端还是使用浏览器运行。SSR中未定义window

const isClientSide: boolean = typeof window !== 'undefined'

延迟加载对我很有效。在Vue中延迟加载组件就像使用函数中 Package 的动态导入来导入组件一样简单。我们可以延迟加载StepProgress组件，如下所示：

export default {
  components: {
    StepProgress: () => import('vue-step-progress')
  }
};

除了这里所有的答案，你还可以面对一些其他的软件包，不兼容SSR的开箱即用，这将需要一些黑客工作正常.这里是my answer的细节.
TLDR是指您有时需要：

• 使用process.client
• 使用<client-only>标记
• 如果以后需要，使用动态导入，如const Ace = await import('ace-builds/src-noconflict/ace')
• 有条件地加载组件components: { [process.client && 'VueEditor']: () => import('vue2-editor') }

对我来说，这是在Nuxt中使用顶点图表的情况，所以我必须将ssr: false添加到nuxt.config.js中。