修正Nuxt中導航器/視窗/文件未定義的方法

Question

我試圖確定 Nuxt 應用程式內的 UserAgent 和 Retina 資訊。但應用程式拋出錯誤並顯示導航/視窗未定義。我如何在 nuxt 應用程式中獲取這些資訊？

const userAgent = navigator.userAgent.toLowerCase()
const isAndroid = userAgent.includes('android')

isRetina() {
  let mediaQuery
  if (typeof window !== 'undefined' && window !== null) {
    mediaQuery =
      '(-webkit-min-device-pixel-ratio: 1.25), (min--moz-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5/4), (min-resolution: 1.25dppx)'
    if (window.devicePixelRatio > 1.25) {
      return true
    }
    if (window.matchMedia && window.matchMedia(mediaQuery).matches) {
      return true
    }
  }
  return false
}

Answer 1

這是要修復的解決方案：

• navigator 未定義
• window 未定義
• #文件未定義

---

#這是一個關於如何包裝邏輯 JS 程式碼的範例

sssccc

如下：https://nuxtjs.org/docs/2。 x/internals-glossary/context

PS： mounted process.client 有點多餘，因為 mounted 只運行在 客戶端。

---

此外，如果您希望元件僅在客戶端呈現，則將元件包裝到 <client-only> 也是一個好主意。