1. Install babel-polyfill
- Command: npm i --save-dev babel-polyfill
- Introduce in the entry file: import ‘babel-polyfill’
- Find in the build folder. Modify the entry method:
entry: {
app:['babel-polyfill','./src/']
},
2. Install babel-preset-es2015 (solve ES6/ES7 high-level syntax compatibility)
- npm install --save-dev babel-preset-es2015-ie
- Adjust the contents of .babelrc in the root directory (if the file .babelrc is missing in the root directory, create a new one)
{
"presets": [
"es2015",
["env", {
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}
}
3. Add meta tag
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit">
4. After configuring the above three steps, there may be incompatible es6 and es7 syntaxes in the dependent three-party components (the corresponding files can be located according to the browser console)
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'),resolve('static'),resolve('node_modules/webpack-dev-server/client'),,resolve('node_modules/element-ui/src')]
}
After configuring IE, 360 and other browsers, you can display the page.
Summarize
This is the article about the solution to the compatibility problems of IE and 360 browsers in vue2. For more related content related to IE and 360 browsers in vue2, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!