最近、古いバックグラウンド管理システムに組み込まれる新しい PC 側プロジェクトが開発されました。お客様が使用しているGoogle Chromeのバージョンが比較的低く、バージョンアップ処理をしたがらないため、低バージョンのブラウザの互換処理しかできません（残念ながら、一部の新しい技術は使いたくても使えない場合があります） 。そこで、vue3.0+viteプロジェクトの低バージョンブラウザの互換処理についてまとめます。
1. babel/polyfill とその関連依存関係をインストールします。
低バージョンのブラウザ (Google Chrome バージョン 66.0) の互換性の問題を解決するには、率直に言って、低バージョンのブラウザは最新の構文をサポートしていないため、最新の構文を低バージョンのブラウザがサポートできる古い構文に変換する必要があります。認識してロードします。これらの下位バージョンのブラウザは ES6 構文と新しい API をサポートしておらず、Babel はデフォルトで新しい JavaScript 構文のみを変換しますが、Proxy、Symbol、Promise などのグローバル オブジェクトや、グローバル オブジェクトで定義された一部などの新しい API は変換しません。メソッドはトランスコードされません。
npm install --save @babel/polyfill
npm install --save-dev @babel/core @babel/plugin-transform-runtime @babel/preset-env es6-promise babel-polyfill
2. これを main.js に導入します。注: これは先頭の最初の行である必要があります。
import "@babel/polyfill"; //(一定要在最上面，第一行)
import Es6Promise from "es6-promise";
Es6Promise.polyfill();
import {
createApp } from "vue";
import router from "@/router";
import store from "@/store";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import {
createPinia } from "pinia";
const app = createApp(App);
app
.use(store)
.use(ElementPlus)
.use(router)
.use(createPinia())
.mount("#app");
3. 新しい babel.config.js ファイルを作成します
module.exports = {
presets: [
[
"@vue/app",
{
useBuiltIns: "entry",
polyfills: ["es6.promise", "es6.symbol"],
},
],
[
"@babel/preset-env",
{
modules: false,
useBuiltIns: "entry",
corejs: 2,
},
],
],
};
4. package.json ファイルでブラウザリストを構成します。
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 11"
]
5. vite.config.js と同じレベルに .babelrc ファイルを作成します。
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime"]
}
結果
上記の手順に従って構成した後、ローカル開発環境は正常ですが、パッケージ化してテスト環境にデプロイするとエラーが報告されます。
エラー メッセージは次のとおりです。
Uncaught SyntaxError: Unexpected token ?
解析できません???
es6の文法なので互換性がまだよくできていません。
この問題はどうすれば解決できますか? 他のオプションを再度試し始めました。
まず、上で追加したコードを削除せずに、次の解決策を追加したことを言っておきます。
6. 解決策
vite.config.js でブラウザの互換性を設定します。
私たちのプロジェクトは vite で構築されているため、最初に vite 独自の API を使用してブラウザーの互換性を設定することを考えました。
build.target と buid.cssTarget を構成する
build: {
target: ['chrome52'],
cssTarget: ["chrome52"],
}
このコードを vite.config.js に追加すると機能し、下位バージョンの Google ブラウザでもページを実行できるようになります。
これまでのところ、ブラウザの互換性の問題は解決されています。