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

所以，我关注了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'],

但是我仍然不能解决这个问题。

Answer 1

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

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

这有点草率，但是有效。这是有关如何使用plugins to do it better的不错的文章。

Answer 2

2019年10月更新

未定义Window的错误是由于nodejs服务器端脚本无法识别仅属于浏览器的window对象而导致的。

从nuxt v2.4开始，您无需添加process.client或process.browser。

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

~/plugins/myplugin.js

import Vue from 'vue';
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会识别插件扩展名，这些扩展名将在服务器端 .server.js 或客户端 .client.js 上呈现，具体取决于{{ 3}}使用。

注意：添加不带 .client.js 或 .server.js 扩展名的文件将在客户端和服务器端同时呈现该插件。extension

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

Answer 3

Nuxt.js是服务器端渲染的，服务器端不存在Windows。您可以在Vue.js Server-Side Rendering Guide

上了解它

Answer 4

所有内容都包含在nuxt docs和常见问题解答中。首先，您需要使其成为插件。其次，您只需要使您的插件客户端

  plugins: [
    { src: '~/plugins/vue-notifications', ssr: false }
  ]

在nuxt 2.x中也未使用供应商，并且如果在ssr为false的插件中也不需要您的process.client

Answer 5

惰性加载对我有用。延迟加载Vue中的组件与使用包装在函数中的动态导入来导入组件一样容易。我们可以如下所示延迟加载StepProgress组件：

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

Answer 6

您可以检查是否在客户端或浏览器上运行。 window不是通过SSR定义的

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

Answer 7

如果您在这里尝试了大多数答案，但没有用，请检查一下，在使用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-seesion',VueSession)

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

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

在index.vue或您要使用该软件包的任何页面中...导入已装入的软件包，以便在客户机页面装入时可用... 导出默认值{ ...

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

...
}

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

7 个答案: