Vue.js Nuxt.js 中的window is not defined未定义窗口

发布于10月31日

我从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'],

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

推荐答案

UPDATED AUGUST 2021

窗口未定义错误源于nodejs服务器端脚本无法识别仅适用于浏览器的窗口对象.

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

通常，nuxt插件目录的 struct 如下:

100

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

Vue.use(VueSession);

然后在100中，您可以使用以下两种方法将插件添加到项目中:

METHOD 1:

将值为'client'的mode property添加到插件中

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

METHOD 2: (Simpler in my opinion)

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

注意:添加没有101或102扩展名的文件将在客户端和服务器端呈现插件.阅读here多篇.

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

Vue.js相关问答推荐

如何禁用Vuetify v—stepper操作按钮

如何在与父集合相同的读取中取回子集合(或重构数据？)

Select 项目后，Vuetify v-select在select后面显示数字1

Vue 2 如何在全局函数中返回观察者

nuxt.js auth 始终重定向到登录，而不是允许转到带有 auth： false 的页面，

使用 vue / nuxt js 切换 fontawesome 图标

我可以在打印 HTML 页面时使用作用域 CSS 吗？ (使用 Laravel 和 Vue.js)

Vue-tables-2(vuex)react性不起作用

如果 Vuetify 自动完成没有匹配的结果，则保留输入的文本

如何在 vue 组件之外访问$apollo？

如何在 Vuetify v-data-table 上对齐标题

Vuex - 如何跨不同选项卡持久存储更新？

数据更新后触发 Vue.js 事件

为什么我在 vue.js 中得到避免使用 JavaScript 一元运算符作为属性名称？

在Vue.js中从父组件执行子方法

Vue devServer 代理没有帮助，我仍然收到 CORS 错误

$set 不是函数

如何从浏览器的源中删除 webpack：//

Vue组件如何命名

如何在 Vue.js 2 应用程序中模拟 onbeforeunload？

实用课程推荐