Nuxt.js 中的“未定义窗口”答案

【问题标题】：“window is not defined” in Nuxt.jsNuxt.js 中的“未定义窗口”
【发布时间】：2019-07-25 13:16:32
【问题描述】：

我从 Vue.js 移植到 Nuxt.js 时遇到错误。

我正在尝试在node_modules 中使用vue-session。它编译成功，但在浏览器中我看到错误：

ReferenceError 窗口未定义

node_modules\vue-session\index.js:

VueSession.install = function(Vue, options) {
    if (options && 'persist' in options && options.persist) STORAGE = window.localStorage;
    else STORAGE = window.sessionStorage;
    Vue.prototype.$session = {
        flash: {
          parent: function() {
            return Vue.prototype.$session;
          },

所以，我关注了this documentation：

rewardadd.vue:

import VueSession from 'vue-session';

Vue.use(VueSession);

if (process.client) {
  require('vue-session');
}

nuxt.config.js:

  build: {
    vendor: ['vue-session'],

但我仍然无法解决这个问题。

【问题讨论】：

window 仅存在于客户端，在浏览器中。在 Node.js 环境中它不存在。
我个人认为评价新贡献者的问题不好。
获得相同的案例

标签： vue.js nuxt.js

【解决方案1】：

对我来说是在 Nuxt 中使用 apex-charts 的情况，所以我不得不将 ssr: false 添加到 nuxt.config.js。

【讨论】：

【解决方案2】：

所有内容都包含在 nuxt docs 和常见问题解答中。首先你需要把它做成一个插件。其次，您只需要制作插件客户端

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

在 nuxt 2.x 中也没有使用 vendor 并且如果它在插件中使用 ssr false 则不需要您的 process.client

【讨论】：

【解决方案3】：

2021 年 8 月更新

由于 nodejs 服务器端脚本无法识别仅浏览器原生的窗口对象，导致窗口未定义错误。

从 nuxt v2.4 开始，您不需要添加 process.client 或 process.browser 对象。

通常您的 nuxt 插件目录结构如下：

~/plugins/myplugin.js

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 property 添加到您的插件中

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

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

使用扩展名 .client.js 重命名您的插件，然后将其添加到 nuxt.config.js 插件中的插件中。 Nuxt 2.4.x 将根据所使用的extension 将插件扩展识别为在服务器端.server.js 或客户端.client.js 上呈现。

注意：添加没有 .client.js 或 .server.js 扩展名的文件将在客户端和服务器端呈现插件。阅读更多here。

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

【讨论】：

如何确定服务器端需要哪个插件，客户端需要哪个插件？
@ЯрославПрохоров 这取决于您希望通过插件实现的目标以及它在客户端消耗的数据量（因为这会影响您的用户体验）。如果您的插件进行了许多影响页面加载时间的 api 调用，我建议在客户端使其异步，另一方面，如果您对确保插件安全感到敏感，则将其呈现在后端。这只是我的观点，您可以询问其他开发人员并获得适合您的应用程序的答案。节日快乐！
这也适用于我。但我想限制在特定组件上使用plugin。有没有办法在特定组件上导入插件，而不是全局可用？
@Adriano 这实际上是一个非常好的主意（限制全局插件的使用）。要将其导入特定组件，您可以将import VueSession from 'vue-session' 直接写入您的组件。这样一来，它的作用域就在那里，而且只在那里。当只有一个组件使用该包并且您不想对整个应用程序进行惩罚时很有用。
@kissu 但是你如何让它只在客户端加载？

【解决方案4】：

如果您已经尝试了这里的大多数答案，但它对您不起作用，请检查一下，我在使用支付包 Paystack 时也遇到了同样的问题。我将使用 OP 的实例

创建一个以.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')
   }
 }
...
}

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

延迟加载对我有用。在 Vue 中延迟加载组件就像使用包装在函数中的动态导入来导入组件一样简单。我们可以像下面这样懒加载 StepProgress 组件：

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

【讨论】：

【解决方案7】：

服务器端渲染端没有窗口对象。但快速解决方法是检查process.browser。

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

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

【讨论】：