[解決済み] Nuxt.jsで "window is not defined "と表示される。

質問

Vue.jsからNuxt.jsに移植する際にエラーが発生します。

を使おうとしています。 vue-session で node_modules . コンパイルは成功するのですが、ブラウザではエラーが表示されます。

ReferenceError windowが定義されていません。

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

しかし、まだこの問題を解決することができません。

どうすればいいですか？

2021年8月更新

Window is not definedエラーは、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 を選択すると、以下の2つの方法でプロジェクトにプラグインを追加することができます。

方法1:

を追加します。 モード プロパティ という値で 'クライアント' をプラグインに追加します。

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: [
  { src: '~/plugins/myplugin.client.js' }
]