Soybean Admin 配置vite兼容低版本浏览器、安卓电视浏览器(飞视浏览器)

环境

window10
pnpm 8.15.4
node 8.15.4
vite 5.1.4
soybean admin: 1.0.0
native-ui: 2.38.0
小米电视 MIUI TV版本：MiTV OS 2.7.1886(稳定版)
飞视浏览器：https://www.fenxm.com/1220.html

在小米电视安装飞视浏览器可以去小红书查安装教程：苹果手机小米电视安装第三方 app 教程

描述

Soybean Admin 配置vite兼容低版本浏览器、安卓电视浏览器，解决了网页在小米电视的飞视浏览器访问页面空白的问题。

这是客户的特殊需求，需要支持后台监控系统在电视上访问。虽然后面还是单独开发了安卓app（安卓对焦点的支持真的非常友好），但是这个Soybean Admin 兼容一下低版本浏览器还是有必要分享出来的

实现

经过一番测试，在电脑Chrome浏览器正常访问，其它同是使用vite、vue3、vue2技术栈的都可以在电视正常访问，所以应该是打包配置问题。第一次用vite，网上的大致意思是vite默认支持高版本浏览器，如果你想兼容低版本浏览器，必须自己配合一些插件使用

第一步，安装依赖

pnpm i @vitejs/plugin-legacy terser -D
pnpm i @babel/core @babel/preset-env @babel/plugin-proposal-optional-chaining core-js -D

特别是这个 vitejs/plugin-legacy，一开始默认安装最新版本，导致开发环境都报错，后面查了很多，要看自己vite版本，再去对应 vitejs/plugin-legacy 版本

安装对应版本：

#版本一定对好，不然开发环境都会报错
pnpm i @vitejs/plugin-legacy@5.4.0 -D

第二步，兼容性配置

根目录下新增文件：babel.config.cjs

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: false, // 不指定目标浏览器，由 plugin-legacy 管理
        useBuiltIns: false, // 不处理 Polyfill，由 plugin-legacy 管理
      },
    ],
  ],
  plugins: [
    '@babel/plugin-proposal-optional-chaining', // 支持可选链操作符
  ],
}

引入 vitejs/plugin-legacy 插件，位置：build/plugins/index.ts

import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import VueDevtools from 'vite-plugin-vue-devtools';
import progress from 'vite-plugin-progress';
import legacy from '@vitejs/plugin-legacy';
import { setupElegantRouter } from './router';
import { setupUnocss } from './unocss';
import { setupUnplugin } from './unplugin';

export function setupVitePlugins(viteEnv: Env.ImportMeta) {
  // PluginOption改为any，不然我的legacy会报错
  const plugins: any = [
    vue({
      script: {
        defineModel: true
      }
    }),
    legacy({
      targets: ['defaults', 'not IE 11', 'last 2 versions', '> 1%', 'Android >= 4.4'], // 需要兼容的浏览器版本
      additionalLegacyPolyfills: ['core-js/stable', 'regenerator-runtime/runtime'], // 兼容 async/await
      modernPolyfills: true,
      // renderLegacyChunks: true,
      // polyfills: [
      //   // 列出需要添加的polyfill
      //   'es.symbol', 'es.promise', 'es.promise.finally',
      //   'es/map', 'es/set', 'es.array.filter',
      //   // ...其他polyfill
      // ]
    }),
    vueJsx(),
    VueDevtools(),
    setupElegantRouter(),
    setupUnocss(viteEnv),
    ...setupUnplugin(viteEnv),
    progress(),
  ];

  return plugins;
}

引入其它插件，位置：src/main.ts

import 'core-js/stable';
import 'regenerator-runtime/runtime'; // 如果你的代码使用了生成器（Generator），你也需要这个 Polyfill
import { createApp } from 'vue';
import './plugins/assets';
import { setupDayjs, setupIconifyOffline, setupLoading, setupNProgress, setupTvFocusable } from './plugins';
import { setupStore } from './store';
import { setupRouter } from './router';
import { setupI18n } from './locales';
import App from './App.vue';

async function setupApp() {
  setupLoading();

  setupNProgress();

  setupIconifyOffline();

  setupDayjs();

  const app = createApp(App);

  setupStore(app);

  setupTvFocusable(app);

  await setupRouter(app);

  setupI18n(app);

  app.mount('#app');
}

setupApp();

这里必须把前面两句放到最顶部！

如果你按照步骤做，重新部署了项目，在电视端访问还是页面空白，不妨清理一些浏览器缓存，或者再看看别的解决方案

关于 vite 使用plugin-legacy兼容低版本浏览器仍出现的问题的情况

vite创建的react项目如何兼容低版本安卓，低版本安卓不支持es6语法

vue3+vite兼容低版本的白屏问题详解(安卓7/ios11)

补充

最后补充，这里就算能访问到页面了，电视不像电脑，电视只能通过遥控器去交互，像是登录操作、点击打开新页面的操作，还是比较难搞的，建议还是跟客户聊好，如果电视端只要简单支持遥控器操作，可以看我下一篇文章：Soybean Admin 使用tv-focusable兼容电视TV端支持遥控器移动焦点。如果想要交互好、效果好、兼容性好，那建议还是安卓开发电视应用