Recientemente se desarrolló un nuevo proyecto para PC que debía integrarse en un antiguo sistema de gestión en segundo plano. Debido a que la versión de Google Chrome utilizada por los clientes es relativamente baja y no están dispuestos a realizar el procesamiento de actualización, solo podemos realizar el procesamiento de compatibilidad de los navegadores de versión baja (desafortunadamente, algunas tecnologías nuevas quieren usarse pero no se pueden usar). . Así que resumo el procesamiento de compatibilidad de los navegadores de versión baja del proyecto vue3.0 + vite.
1. Instale babel/polyfill y sus dependencias relacionadas
Para resolver el problema de compatibilidad de los navegadores de versiones inferiores (Google Chrome versión 66.0), para decirlo sin rodeos, los navegadores de versiones inferiores no admiten la sintaxis más reciente, por lo que la sintaxis más reciente debe convertirse a la sintaxis anterior que los navegadores de versiones inferiores pueden reconocer y cargar. Los navegadores con versiones inferiores no admiten la sintaxis ES6 ni las nuevas API, y Babel solo convierte la nueva sintaxis de JavaScript de forma predeterminada, pero no convierte las nuevas API, como objetos globales como Proxy, Symbol, Promise y algunos definidos en objetos globales. Los métodos no se transcodifican.
npm install --save @babel/polyfill
npm install --save-dev @babel/core @babel/plugin-transform-runtime @babel/preset-env es6-promise babel-polyfill
2. Introducirlo en main.js, nota: debe ser la primera línea en la parte superior
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. Cree un nuevo archivo 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. Configure la lista de navegadores en el archivo package.json.
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 11"
]
5. Cree un archivo .babelrc al mismo nivel que vite.config.js
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime"]
}
resultado
Después de configurar de acuerdo con los pasos anteriores, el entorno de desarrollo local es normal, pero después de empaquetarlo e implementarlo en el entorno de prueba, se informa un error.
El mensaje de error es el siguiente:
Error de sintaxis no detectado: ¿Token inesperado?
¿No se puede analizar????
Es la gramática en es6, por lo que la compatibilidad aún no está bien.
¿Cómo se puede solucionar este problema? Empecé a probar otras opciones nuevamente.
En primer lugar, permítanme decirles que no eliminé el código agregado anteriormente y luego agregué la siguiente solución.
6. Soluciones
Configure la compatibilidad del navegador en vite.config.js.
Nuestro proyecto está construido con vite, así que primero pensé en usar la propia API de vite para configurar la compatibilidad del navegador.
Configurar build.target y buid.cssTarget
build: {
target: ['chrome52'],
cssTarget: ["chrome52"],
}
Después de agregar este código en vite.config.js, funciona y la página puede ejecutarse en navegadores de Google con versiones inferiores.
Hasta ahora, el problema de compatibilidad del navegador se ha solucionado.