環境
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端支持遙控器移動焦點。如果想要交互好、效果好、兼容性好，那建議還是安卓開發電視應用
