Vue.js应用无法压缩：运行正常但报Unexpected token错误

我来帮你揪出这个问题的根源——你遇到的压缩失败，本质是代码里用了ES6语法，但你的压缩工具默认只支持解析ES5代码。

问题出在哪？ #

先看你的代码里的关键部分：

window.myApp = new Vue({ 
  el: '#wrapper', 
  data() { // 这里是ES6的对象方法简写语法
    return { somedata: [] } 
  } 
});

报错信息里的punc(()，指的就是data() { ... }这个ES6的简写写法。很多旧版的压缩工具（比如早期的UglifyJS）没法识别这种ES6语法，所以直接抛出了语法错误。

两种快速修复方案 #

方案1：转成ES5兼容写法（最直接）

把ES6的对象方法简写改成ES5的函数声明形式就行：

// 把原来的data() { ... }改成：
data: function() {
  return { somedata: [] }
}

修改后的完整代码：

(function() { initApp(); })(); 
function initApp() { 
  window.myApp = new Vue({ 
    el: '#wrapper', 
    data: function() {
      return { somedata: [] } 
    } 
  }); 
} 

这种写法所有支持ES5的压缩工具都能正常处理，不用改工具配置。

方案2：让压缩工具支持ES6

如果你想保留ES6语法，可以换用支持ES6+的压缩工具，比如terser（它是UglifyJS的升级替代版，原生支持ES6）；或者在你的构建流程里加入Babel，先把ES6代码转成ES5再压缩。

测试验证 #

改完之后再尝试压缩，应该就能顺利通过了——你的代码逻辑本身是没问题的，只是卡在了语法兼容的小细节上。

内容的提问来源于stack exchange，提问作者Asa Carter