vue2 + vue-cli3+ 设置兼容IE10+ 避坑指南
2022-10-17 本文已影响0人
林玲玲的笔记
- 使用vue2+ vue-cli3+ 搭建vue项目。
- 查看package.json是否有安装有安装core-js,如没有的话就安装一下。
使用:npm i core-js - 配置main.js,在最前面新增引入
// IE10兼容 with polyfills
import 'core-js/stable'
import 'regenerator-runtime/runtime'
- 设置:babel.config.js。如没有该文件,则新建一个,配置如下:
module.exports = {
presets: [
[
'@vue/cli-plugin-babel/preset',
{
useBuiltIns: 'entry',
corejs: 3
}
]
],
plugins: [ ]
}
- 设置:vue.config.js,如没有该文件,则新建一个,配置如下:
module.exports = {
// 添加transpileDependencies配置属性,按需添加需要编码的内容
transpileDependencies: ['*'],
}
这个配置后,能解决IE上这个报错,如图:
image.png
-
安装axios时,注意axios的版本号。
当版本号过高时候,会出现如下所示错误,从而导致页面加载为空:
1665997237166.png
开始我安装的是: "axios": "^1.1.2",
后来改成"axios": "^0.19.2" 版本就解决了这个问题。
安装命令:
npm i axios@0.19.2 -D