vue3 兼容低版本浏览器Chrome、IE、Firefox
低版本浏览器不能正常访问浏览器,需要将项目中的 ES6 语法转 ES5 语法
1、安装 babel-polyfill插件
npm i babel-polyfill
npm install --save-dev @babel/core @babel/preset-env core-js @babel/plugin-transform-runtime @babel/preset-env es6-promise babel-polyfill
2、vue.config.js 中添加以下代码
chainWebpack: config => {
config.entry('main').add('babel-polyfill')
config.entry.app = ['babel-polyfill', './src/main.js']
}
3、在根目录下新建 .babelrc
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": [
"last 2 versions",
"ie >= 11",
"chrome >= 60",
"firefox >= 54",
"safari >= 10",
"opera >= 48"
]
},
"useBuiltIns": "entry",
"corejs": 3
}
]
]
}
4、新建babel.config.js文件中配置
module.exports = {
presets: [
[
"@vue/app",
{
useBuiltIns: "entry",
polyfills: ["es6.promise", "es6.symbol"],
},
],
[
"@babel/preset-env",
{
modules: false,
useBuiltIns: "entry",
corejs: 2,
},
],
],
};
5、vue.config.js (新增)配置 transpileDependencies
transpileDependencies: [
'element-plus', 'js-cookie', 'vxe-table', 'xe-utils','vue-virtual-scroll-list','vue-socket.io'
],