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