vue项目兼容IE浏览器babel配置

vue项目在IE在浏览器中无法打开,报错
script .js ':'

原因:es6,7语法在IE浏览器中无法正常解析

然后子引用了babel插件,但是安装配置后仍然在IE浏览器中无法打开
后面发现是自己插件下载配置不完整,下面是自己打开得了的配置

在package.json配置如下babel插件

"devDependencies": {
    "@babel/core": "^7.11.1",
    "@babel/plugin-transform-runtime": "^7.11.0",
    "@babel/polyfill": "^7.10.4",
    "@babel/preset-env": "^7.11.0",
    "@vue/cli-plugin-babel": "^3.9.0",
    "@vue/cli-plugin-eslint": "^3.9.0",
    "@vue/cli-service": "^3.9.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "autoprefixer": "^9.8.6",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "babel-polyfill": "^6.26.0",
    "babel-preset-stage-0": "^6.24.1",
    "es6-promise": "^4.2.8",
  }```
配置好后npm install安装即可,接下来就是代码配置
在创建.babelrc文件
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200813213642887.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JlbGF4X2dv,size_16,color_FFFFFF,t_70#pic_center)
配置如下代码

```javascript
{
    "presets": ["@babel/preset-env"],
    "plugins": [
      "@babel/plugin-transform-runtime"
    ]
  }

在babel.config.js配置如下代码

var plugins = []
if (['production', 'prod'].includes(process.env.NODE_ENV)) {
  plugins.push('transform-remove-console')
}

module.exports = {
  presets: [
    [
      '@vue/app',
      {
        'useBuiltIns': 'entry',
        polyfills: [
          'es6.promise',
          'es6.symbol'
        ]
      }
    ]
  ],
  plugins: plugins
}

vue.config.js配置如下代码

module.exports = {
  transpileDependencies: ['node_modules/webpack-dev-server/client'],
  chainWebpack: (config) => {
    config.module.rule('compile')
      .test(/\.js$/)
      .include
      .add(resolve('src'))
      .add(resolve('test'))
      .add(resolve('node_modules/webpack-dev-server/client'))
      .add(resolve('node_modules'))
      .end()
      .use('babel')
      .loader('babel-loader')
      .options({
        presets: [
          ['@babel/preset-env', {
            modules: false
          }]
        ]
      })
  }
}

main.js文件配置

import 'babel-polyfill'
import Es6Promise from 'es6-promise'
require('es6-promise').polyfill()
Es6Promise.polyfill()
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值