界面布局问题-inset失效

现象

原因

1. inset: 0不生效

2. 当前谷歌浏览器版本为86；360安全浏览器版本为13.1，谷歌内核版本为86，根据浏览器兼容性可知，当前属性不兼容

   

3. 代码里面没有inset，vite打包编译后将css样式top:0;bottom:0;right:0;left:0;这四个属性合并成为了inset:0;

   

解决方案

cn.vitejs.dev/config/buil…

界面报错 SyntaxError: Unexpected reserved word

现象

原因

1. 可能是顶层await问题，即在函数内使用 await 时，该函数本身必须携带 async，否则就不能使用 async/await

2. 代码中await没有携带async

   

解决方案

代码中存在顶层await问题的情况主要有两类

1. 字典获取，统一的写法，都没有使用配套使用。解决方案如下

   1. 字典统一在获取用户信息之后调用，并存入store

   

   3. 把获取字典的数据统一封装到util中，减少修改量

      

   4. 各个地方调用

      

2. 其他的情况(不是字典，但也存在顶层await问题)

   补充 async即可

Vite低版本浏览器兼容

1. 引入@vitejs/plugin-legacy，terser

2. tsconfig.json配置

   {
     "compilerOptions": {
       "target": "es2015",
       "module": "es2015",
     }
    }
   

3. vite.config.ts配置

   import legacy from '@vitejs/plugin-legacy';
   
   plugins: [
    legacy({
           targets: ['defaults', 'ie >= 11', 'chrome >= 52'],
           additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
           modernPolyfills: true
         })
   ]
   
    build: {
         target: 'es2015',
         cssTarget: 'chrome52',
         cssCodeSplit: true
       },
   

GlobalThis is not define

App.vue配置

  onMounted(() => {
    !(function (t) {
      function e() {
        var e = this || self;
        (e.globalThis = e), delete t.prototype._T_;
      }
      'object' != typeof globalThis &&
        (this
          ? e()
          : (t.defineProperty(t.prototype, '_T_', {
              configurable: !0,
              get: e,
            }),
            _T_));
    })(Object);
  });

低版本浏览器height: 100%问题

火狐浏览器 兼容问题 上传文件报错

现象

原因

火狐浏览器 file instanceof File 为false

谷歌浏览器 file instanceof File 为true

解决方案