解决vue项目xp系统下的兼容性

CodeWizard2023

已于 2023-06-20 11:28:20 修改

阅读量1k

点赞数

分类专栏： ES6 技巧兼容性文章标签： vue.js javascript 前端 es6

于 2023-06-20 11:23:59 首次发布

本文链接：https://blog.csdn.net/qq_32467107/article/details/131301697

版权

文章讲述了在XP系统下使用Chrome49版本遇到的globalThis不支持和flex布局问题，以及Hiprint二维码打印问题的解决方案。通过JavaScript补丁和CSS调整来确保页面正常显示，并提供了一种将SVG二维码转换为图片以适应打印的方法。

摘要由CSDN通过智能技术生成

在xp系统下，我们一般要求用户使用chrome49，这是chrome支持xp系统的最后一个版本。
下载地址： https://www.icka.org/2490/the-last-version-chrome-fo-xp

一、不支持globalthis

兼容性
从上图我们知道，globalthis至少需要chrome71版本，导致在xp系统下项目无法打开，页面空白。

globalthis兼容性

# 在main.js中插入以下代码
if (typeof globalThis === 'undefined') {
   
  window.globalThis = window
}

二、父元素flex:1,子元素height:100% 失效

方案1：通过js代码调整，经过测试发现，当flex:1的父元素设置高度后，页面恢复正常。

import {
    throttle } from 'lodash-es'

const userAgent = window.navigator.userAgent

function getCurrentSystem() {
   
  var systemName = ''
  if (userAgent.indexOf('Windows NT 10.0') != -1) {
   
    systemName = '10'
  } else if (userAgent.indexOf('Windows NT 6.2') != -1) {
   
    systemName = '8'
  } else if (userAgent.indexOf('Windows NT 6.1') != -1) {
   
    systemName = '7'
  } else if (userAgent.indexOf('Windows NT 6.0') != -1) {
   
    systemName = 'vista'
  } else if (userAgent.indexOf('Windows NT 5.1') != -1) {
   
    systemName = 'xp'
  }
  return systemName
}

function getChromeVersion() {
   
  var uarr = userAgent.split(' '