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
      }
    })
  }
}

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

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

阅读更多
上一篇WEUI picker组件无法js动态改变选项
下一篇vue项目在IE中显示空白,报错:vuex requires a Promise polyfill in this browser
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭