搜尋

首頁  >  問答  >  主體

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

我試圖確定 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
}

P粉143640496P粉143640496247 天前425

全部回覆(1)我來回復

  • P粉242126786

    P粉2421267862024-03-26 16:45:25

    這是要修復的解決方案:

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

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

    sssccc
    

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

    PS: mounted process.client 有點多餘,因為 mounted 只運行在 客戶端


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

    
    

    此文件的文檔位於:https://nuxtjs.org/docs/2.x/features/nuxt-components/#the-client-only-component

    #PS:請注意,因為這個 client-only 標記只會跳過渲染,而不是執行,如 此處解釋


    某些軟體套件在匯入時不支援 SSR,為此您可以:

    • 動態導入中使用條件(如果稍後要使用該庫)
    • 直接像這樣(如果你想載入像vue-editor這樣的元件)
    export default {
      components: {
        [process.client && 'VueEditor']: () => import('vue2-editor'),
      }
    }
    

    回覆
    0
  • 取消回覆