nuxt.js vueコンポーネントでwindowオブジェクトを使用してエラーをコンパイルする解決方法

916 ワード

最近は自分の個人サイトを書くのに忙しくて、PC側とモバイル側を同時に互換させるUIを作りたくないので、elementUIをモバイル側UIに、bootstrapvueをPC側UIにしたいので、トップページで携帯電話環境かどうかを判断する必要がありますが、vueコンポーネントで使用するのはコンパイルですが通過できず、最終的に資料を検索して解決方法を得ることができません.
nuxtはSSRフレームワークであるため、パッケージをコンパイルする際にサービス側レンダリングとクライアントレンダリング(すなわちブラウザ)を区別し、vueファイルでwindowオブジェクトを使用してエラーを報告するのは、webpackがサービス側スクリプトに追加したため、エラーを報告するためである.したがって、使用時には、現在のコード環境がブラウザ環境であるかどうかを判断する必要があります.
公式提供:process.BROWSER_BUILD、判断してwindowオブジェクトを再使用しますが、本人がテストしても無駄です..
if (process.BROWSER_BUILD) {
  console.log(window)
}

最後に資料を調べたところ、Nuxt v 1であることが分かった.0.0バージョンprocess.BROWSER_BUILDは捨てられ、代わりにprocessになった.browserなので、最終的な実装コードは以下の通りです.
beforeCreate() {
    if (process.browser) {
      if ((window.navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i))) {
        window.location = '/mobile'
      }
    }
  },