vue cli3 兼容ie浏览器

Posted 2023-05-03

参考技术A 安装依赖
cnpm install --save babel-polyfill

cnpm install es6-promise --save

在main.js导入
import '@babel/polyfill';
import Es6Promise from 'es6-promise'
Es6Promise.polyfill()

.babelrc文件内配置

"presets": [
[
"@vue/app",

"useBuiltIns": "entry",
"polyfills": [
"es6.promise",
"es6.symbol"
]

]
]


babel.config.js文件中配置
module.exports =
presets: [
[
"@vue/app",

"useBuiltIns": "entry",
polyfills: [
'es6.promise',
'es6.symbol'
]

]
],
;

vue.config.js文件中配置
chainWebpack: config =>
config.module
.rule('iview')
.test(/iview.src.*?js |.html$|.\css/, // 匹配文件名
threshold: 10240, // 对超过10k的数据压缩
deleteOriginalAssets: false // 不删除源文件
))

config.resolve.alias
.set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
.set('_c', resolve('src/components'))
.set('@plugins', resolve('src/plugin'))
,

vue兼容ie9-11

vue项目兼容ie,采用core-js的方式，安装core-js：3.0以上版本

采用vue-cli脚手架，vue-cli3.0开始默认会安装core-js3.0的版本

在vue项目中可能会用到promise

现在用vue-cli5.0建vue2的项目的时候安装vue-router需要注意版本，不然路由一直报错

npm i vue-router@3.5.2 或者 npm i vue-router@3.5.2 --force 或者 npm i vue-router@3.5.2 --legacy-peer-deps

 

用vue-cli创建的项目没必要安装babel-polyfill

 

这是只有vue的项目的安装包

在main.js里面

import "core-js/stable"
import 'regenerator-runtime/runtime'

在babel.config.js

module.exports = 
  env: 
      test: 
          presets: [
              [
                  '@babel/preset-env',
                  
                      targets: node: 'current',
                  
              ]
          ]
      
  ,
  presets: ['@vue/cli-plugin-babel/preset', '@babel/preset-env'],
;

然后配置.browserslistrc的兼容性性就可兼容ie9,10,11了