Question

更新
事实证明，问题与使用的样板有关。解决方法是不提取TypeScript文件，而是暂时将其保存在.vue文件中。

我在一个简单的Vue测试项目中遇到了这个错误：

ERROR  Failed to compile with 1 errors
error  in ./src/App.ts
Syntax Error: Unexpected token (11:7)

它基本上是您在运行时获得的默认项目：

vue init Toilal/vue-webpack-template my-project

失败的具体代码：

@Component
export default class HelloWorld extends Vue {

  @Prop({ default: 'default ToDo' })
  todo: string; // unexpected token

  name = "test9"; // fine
}

其他一切似乎都运转良好，我没有看到有人抱怨'：'在寻找答案时是一个意外的标记。大约2年前有一个人遇到过这个问题，并使用新的npm版本来解决这个问题，但我显然是一个永远不会版本的版本。

这些是我package.json的依赖部分，因为我猜我的问题是一些奇怪的库组合？

"dependencies": {
  "vue": "^2.5.2",
  "vue-class-component": "^6.0.0",
  "vue-property-decorator": "^6.0.0"
},
"devDependencies": {
  "@types/node": "^6.0.10",
  "autoprefixer": "^7.1.2",
  "babel-core": "^6.22.1",
  "babel-helper-vue-jsx-merge-props": "^2.0.3",
  "babel-loader": "^7.1.1",
  "babel-plugin-syntax-jsx": "^6.18.0",
  "babel-plugin-transform-class-properties": "^6.24.1",
  "babel-plugin-transform-decorators-legacy": "^1.3.4",
  "babel-plugin-transform-runtime": "^6.22.0",
  "babel-plugin-transform-vue-jsx": "^3.5.0",
  "babel-preset-env": "^1.3.2",
  "babel-preset-stage-2": "^6.22.0",
  "chalk": "^2.0.1",
  "copy-webpack-plugin": "^4.0.1",
  "css-loader": "^0.28.0",
  "eventsource-polyfill": "^0.9.6",
  "extract-text-webpack-plugin": "^3.0.0",
  "file-loader": "^1.1.4",
  "fork-ts-checker-webpack-plugin": "^0.3.0",
  "friendly-errors-webpack-plugin": "^1.6.1",
  "html-webpack-plugin": "^2.30.1",
  "node-notifier": "^5.1.2",
  "optimize-css-assets-webpack-plugin": "^3.2.0",
  "ora": "^1.2.0",
  "portfinder": "^1.0.13",
  "postcss-import": "^11.0.0",
  "postcss-loader": "^2.0.8",
  "postcss-url": "^7.2.1",
  "raw-loader": "^0.5.1",
  "rimraf": "^2.6.0",
  "semver": "^5.3.0",
  "shelljs": "^0.7.6",
  "ts-loader": "^2.0.3",
  "typescript": "^2.6.2",
  "uglifyjs-webpack-plugin": "^1.1.1",
  "url-loader": "^0.5.8",
  "vue-loader": "^13.3.0",
  "vue-style-loader": "^3.0.1",
  "vue-template-compiler": "^2.5.2",
  "webpack": "^3.6.0",
  "webpack-bundle-analyzer": "^2.9.0",
  "webpack-dev-server": "^2.9.1",
  "webpack-merge": "^4.1.0"
}

Answer 1

default是vue中保留的关键字，尝试使用其他内容。即使在js中，它也应该在switch case中用于返回内容或导出数据

Answer 2

用引号括起default：

@Prop({ 'default': 'default ToDo' })

Answer 3

请确保您在script标记中指定了TypeScript

<script lang="ts">
    ...
</script>

Vue Typescript文件

3 个答案: