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

Question

从 Vue.js 移植到 Nuxt.js 时出现错误。

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

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;
          },

所以，我遵循 了这个文档：

rewardadd.vue ：

 import VueSession from 'vue-session';

Vue.use(VueSession);

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

nuxt.config.js :

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

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

原文由 HM.Park 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

2021 年 8 月更新

Window is not defined 错误是由于 nodejs 服务器端脚本无法识别仅浏览器原生的 window 对象。

从 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 中，您现在可以使用以下两种方法将插件添加到您的项目中：

方法一：

将值为 “client” 的 模式 属性 添加到您的插件

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

---

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

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

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

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

原文由 innocentwkc 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

这有点草率，但它有效。这是一篇关于如何使用 插件做得更好的好 文章。

原文由 RoccoB 发布，翻译遵循 CC BY-SA 4.0 许可协议