Recently, a new PC-side project was developed, which was to be embedded in an old background management system. Because the version of Google Chrome used by customers is relatively low, and they are unwilling to do upgrade processing, so we can only do the compatibility processing of low-version browsers (unfortunately, some new technologies want to be used but cannot be used). So I summarize the compatibility processing of the low-version browsers of the vue3.0+vite project.
1. Install babel/polyfill and its related dependencies
To solve the compatibility problem of lower-version browsers (Google Chrome version 66.0), to put it bluntly, lower-version browsers do not support the latest syntax, so the latest syntax must be converted into the old syntax that lower-version browsers can recognize and load. Those browsers with lower versions do not support ES6 syntax and new APIs, and Babel only converts new JavaScript syntax by default, but does not convert new APIs, such as global objects such as Proxy, Symbol, Promise, and some defined on global objects. methods are not transcoded.
npm install --save @babel/polyfill
npm install --save-dev @babel/core @babel/plugin-transform-runtime @babel/preset-env es6-promise babel-polyfill
2. Introduce it in main.js, note: it must be the first line at the top
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. Create a new babel.config.js file
module.exports = {
presets: [
[
"@vue/app",
{
useBuiltIns: "entry",
polyfills: ["es6.promise", "es6.symbol"],
},
],
[
"@babel/preset-env",
{
modules: false,
useBuiltIns: "entry",
corejs: 2,
},
],
],
};
4. Configure the browserslist in the package.json file
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 11"
]
5. Create a .babelrc file at the same level as vite.config.js
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime"]
}
result
After configuring according to the above steps, the local development environment is normal, but after packaging and deploying on the test environment, an error is reported.
The error message is as follows:
Uncaught SyntaxError: Unexpected token ?
Unable to parse????
It is the grammar in es6, so the compatibility is still not done well.
How can this problem be solved? I started trying other options again.
First of all, let me say that I did not delete the code added above, and then added the following solution.
6. Solutions
Configure browser compatibility in vite.config.js.
Our project is built with vite, so I first thought of using vite's own API to configure browser compatibility.
Configure build.target and buid.cssTarget
build: {
target: ['chrome52'],
cssTarget: ["chrome52"],
}
After I add this code in vite.config.js, it works, and the page can run on Google browsers with lower versions.
So far, the browser compatibility problem has been solved.