Vue.js 语法错误 (SCRIPT1003) IE11 及更低版本答案

【问题标题】：Vue.js Syntax Error (SCRIPT1003) IE11 and lowerVue.js 语法错误 (SCRIPT1003) IE11 及更低版本
【发布时间】：2017-03-09 22:34:45
【问题描述】：

当我在 IE11 或更低版本中尝试我的 vue.js 应用程序时，我得到错误 SCRIPT1003 例外：在指向 routeContent 的控制台中。我的 Snytax 看起来像这样：

var store = new Vuex.Store({
    state: {
        routeContent: null
    },
    mutations: {
        routeContent(state, payload) {
            state.routeContent = payload
            document.title = payload.title
        }
    }
})

【问题讨论】：

你在使用转译器（例如 Babel）吗？

标签： javascript internet-explorer internet-explorer-11 vue.js vuex

【解决方案1】：

您正在尝试在routeContent 的定义中使用object method shorthand - this isn't supported in Internet Explorer or Safari。

您有两个选择，要么开始使用诸如 Babel 之类的转译器，将现代 JS 语法转换为旧版浏览器可以理解的形式 - 或者，如果这太麻烦，您可以切换回使用很好的老式函数语法：

var store = new Vuex.Store({
    state: {
        routeContent: null
    },
    mutations: {
        routeContent: function (state, payload) {
            state.routeContent = payload
            document.title = payload.title
        }
    }
})

【讨论】：

这不是我在使用 Vue.js 开发网站后没有转译的内容！但很有帮助 - 不应该向信使开枪。

【解决方案2】：

这是另一个类似的问题：javascript Ajax SCRIPT1003: Expected ':' in IE 11

我认为您可能需要执行以下操作：

mutations: {
    routeContent: function(state, payload) {  // making it obvious that this is a function
        state.routeContent = payload;
        document.title = payload.title;  // and also the semicolons
    }
}

【讨论】：

或者另一种选择是将 Babel 与 webpack/browserify 一起使用，这样他就可以在 ES2015 中编写他的代码，并且不用分号:)
是的，Babel with webpack 绝对是更好的解决方案，因为 IE 11 中的下一个问题是arrow functions :-)
解决了我的问题。谢谢大家，我们实际上是在客户端使用 vue，有什么建议可以在 atom 编辑器中实现转译吗？
你可以使用像language-babel这样的原子编辑器包。它可以选择transpile-on-save。但我相信你应该能够通过使用vue-cli 来实现同样的目的，它可以做更多的类似开发的服务器代理、缩小和制作生产构建等，同时还可以在开发过程中处理转译。