vue cli 项目在打包时候报错解决方法

问题描述


报错一:
打包过程报错:Unexpected token name <i>, expected punc <;>

IE浏览中报错:SCRIPT1003: 缺少':',并显示空白,其他浏览器正常显示。

报错二:
打包过程报错:Unexpected token: name <$vm>

IE浏览中报错:SCRIPT1002: 语法错误,并显示空白,其他浏览器正常。


报错原因

以上两个问题都是因为IE浏览器不支持ES6的一些语法引起的。


解决方法
vue项目中涉及到ES6语法,要使用IE浏览器,必须安装babel-polyfill,具体操作步骤请参照楼主的另外一篇文章:

vue项目在IE中显示空白

安装babel-polyfill之后,这两个报错依然存在,IE浏览器仍然无法打开,这是因为项目中引入了其他ES6语法的插件,如:vue-preview等等。

根据报错提示定位,找到对应的插件进行修改,我这里是vue-preview。

// 插件原代码
let $vm
export default {
  install (Vue) {
    let Preview = Vue.extend(PreviewComponent)
    if (!$vm) {
      $vm = new Preview({el: document.createElement('div')})
      document.body.appendChild($vm.$el)
    }
    const preview = {
      open (index, list, params) {
        $vm.open(index, list, params)
      },
      close () {
        $vm.close()
      }
    }
    Vue.$preview = preview
    Vue.mixin({
      created: function () {
        this.$preview = Vue.$preview
      }
    })
  }
}

修改后:

// 修改后对应的代码
var $vm
export default {
  install: function (Vue) {
    var Preview = Vue.extend(PreviewComponent)
    if (!$vm) {
      $vm = new Preview({el: document.createElement('div')})
      document.body.appendChild($vm.$el)
    }
    var preview = {
      open: function (index, list, params) {
        $vm.open(index, list, params)
      },
      close: function () {
        $vm.close()
      }
    }
    Vue.$preview = preview
    Vue.mixin({
      created: function () {
        this.$preview = Vue.$preview
      }
    })
  }
}

修改后打包正常,浏览器也可以打开页面。

文中表述仅代表个人观点,有问题欢迎留言交流,或关注楼主微信公众号:上班熊的环球梦。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值