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

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

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