vuevuereact & vue & angular

vue2 + vue-cli3+ 设置兼容IE10+ 避坑指南

2022-10-17  本文已影响0人  林玲玲的笔记
  1. 使用vue2+ vue-cli3+ 搭建vue项目。
  2. 查看package.json是否有安装有安装core-js,如没有的话就安装一下。
    使用:npm i core-js
  3. 配置main.js,在最前面新增引入
// IE10兼容 with polyfills
import 'core-js/stable'
import 'regenerator-runtime/runtime'
  1. 设置:babel.config.js。如没有该文件,则新建一个,配置如下:
module.exports = {
  presets: [
    [
    '@vue/cli-plugin-babel/preset',
    {
      useBuiltIns: 'entry',
      corejs: 3
    }
    ]
  ],
  plugins: [ ]
}
  1. 设置:vue.config.js,如没有该文件,则新建一个,配置如下:
module.exports = {
    // 添加transpileDependencies配置属性,按需添加需要编码的内容
    transpileDependencies: ['*'],
}

这个配置后,能解决IE上这个报错,如图:


image.png
  1. 安装axios时,注意axios的版本号。
    当版本号过高时候,会出现如下所示错误,从而导致页面加载为空:


    1665997237166.png

    开始我安装的是: "axios": "^1.1.2",
    后来改成"axios": "^0.19.2" 版本就解决了这个问题。
    安装命令:

npm i axios@0.19.2 -D
上一篇下一篇

猜你喜欢

热点阅读