vue-cli-service:SyntaxError:意外的令牌“...".需要一个属性名称 [英] vue-cli-service: SyntaxError: Unexpected token '...'. Expected a property name

问题描述

我正在使用 vue 组装一个小应用程序，我特别需要它在不支持 ES6 的设备上运行.我正在使用 vue-cli-service build 进行构建，当尝试在我的 ES5 设备上打开此页面时，我看到此错误 SyntaxError: Unexpected token '...'.需要一个属性名称.

I'm working on putting together a small app using vue, and I specifically need it to run on a device that does not support ES6. I'm using vue-cli-service build to build, and when trying to open this page on my ES5 device, I'm seeing this error SyntaxError: Unexpected token '...'. Expected a property name.

我已经安装了 babel，并将其添加到我的 .babelrc 中:{ "presets": ["@babel/preset-env"] }

I have installed babel, and added this to my .babelrc: { "presets": ["@babel/preset-env"] }

我不确定还可以尝试什么，我找不到任何专门解决此问题的内容.甚至 vue-cli-service 文档也提出了支持 ES5 的 polyfill 的方法，但我认为这不是一回事.

I'm not really sure what else to try, I haven't been able to find anything that specifically addresses this. Even the vue-cli-service documentation suggests ways to support polyfill for ES5, but I don't think this is the same thing.

推荐答案

我在使用 Vuetify 和 Safari 11.1 时遇到了这个问题

I had this problem with Vuetify and Safari 11.1

我猜我需要为旧浏览器转译 Vuetify 的 ES6 版本.解决方案很难搜索，因为大多数建议都是关于修改 webpack 或 babel 配置的，我发现这些在 Vue CLI 中被掩盖了.

I guessed I needed to transpile the ES6 version of Vuetify for older browsers. The solution was difficult to search for, as most of the suggestions were about modifying webpack or babel configuration, which I find obscured inside Vue CLI.

我最终通过 Vue CLI 从头开始​​重建我的项目，自己发现了解决方案，并且安装程序神奇地为 Vuetify 添加了一个我缺少的转译选项 - 我想是因为我之前已经升级 VuetifyES5 到 ES6 版本，也许他们的升级脚本没有执行这一步.

I eventually uncovered the solution myself by rebuilding my project from scratch via Vue CLI, and the installer magically added a transpilation option for Vuetify which I was missing - I think because I had previously upgraded Vuetify across the ES5 to ES6 versions, and perhaps their upgrade script doesn't perform this step.

vue.config.js

vue.config.js

module.exports = {
 "transpileDependencies": [
   "vuetify"
 ],}

这相当于 webpack

this is the equivalent of webpack

build: {
    transpile: ['vuetify']
}

重新启动构建并重新加载.

Restart the build and reload.

当然，您需要找到它是哪个包 - 这只是一个示例.我只是在错误堆栈中挖掘，直到找到属于 Vuetify 的东西.

Of course you will need to find which of your packages it is - this is just an example. I just dug around in the error stack until finding something which belonged to Vuetify.

这篇关于vue-cli-service:SyntaxError:意外的令牌“...".需要一个属性名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！