vue-cli-service: SyntaxError: Unexpected token '…'. Expected a property name

问题

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.

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

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.

回答1:

I had this problem with Vuetify and Safari 11.1

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.

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

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

this is the equivalent of webpack

build: {
    transpile: ['vuetify']
}

Restart the build and reload.

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.

来源：https://stackoverflow.com/questions/57368017/vue-cli-service-syntaxerror-unexpected-token-expected-a-property-name

标签

Vue.js

npm

vue-cli