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 = previewVue.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 = previewVue.mixin({created: function () {this.$preview = Vue.$preview}})}
}

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

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

vue cli 项目在打包时候报错解决方法相关推荐

vue cli 项目在打包时候报错 API fatal error handler returned after process out of memory
问题描述 vue cli 项目在打包时候报错:API fatal error handler returned after process out of memory. 问题分析从给出的提示可以看出 ...
vue 动态加载图片路径报错解决方法
vue 动态加载图片路径报错解决方法参考文章: (1)vue 动态加载图片路径报错解决方法 (2)https://www.cnblogs.com/qingcui277/p/8930507.html ...
vue项目中的一些报错解决方法
1.mixed spaces and tabs no-mixed-spaces-and-tabs 禁止使用空格和tab混合缩进:大多数代码约定要求使用空格或 tab 进行缩进.因此,一行代码同时混有 ...
Target runtime jdk is not defined 项目上红叉报错解决方法
在Markers窗口上显示Faceted Project Problem 错误,如图: 这时候,解决方法如下:在项目上右键,选择Properties-->Targeted Runtimes , ...
vue 项目初始化时，npm run dev报错解决方法
vue 项目初始化时,npm run dev报错解决方法参考文章: (1)vue 项目初始化时,npm run dev报错解决方法 (2)https://www.cnblogs.com/ruilin ...
vue 项目，下载别人的项目和npm run dev报错解决方法
npm install npm run dev 通常在npm install 有时候会出错 $ cnpm install × Install fail! Error: [boostrap@^4.2.1 ...
.vue文件在webstorm中es6语法报错解决方法
.vue文件在webstorm中es6语法报错解决方法参考文章: (1).vue文件在webstorm中es6语法报错解决方法 (2)https://www.cnblogs.com/yuqing6/ ...
eclipse中maven项目pom文件第一行报错解决方法
eclipse中maven项目pom文件第一行报错解决方法参考文章: (1)eclipse中maven项目pom文件第一行报错解决方法 (2)https://www.cnblogs.com/wxym ...
Parsing error: No Babel config file detected for xxx Either disable config file checking...报错解决方法
Parsing error: No Babel config file detected for xxx Either disable config file checking-报错解决方法使用Vu ...