做网站咋做汉阳网页设计
环境
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/awaitmodernPolyfills: 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端支持遥控器移动焦点。如果想要交互好、效果好、兼容性好，那建议还是安卓开发电视应用