Unexpected Token : (冒号) 在 Vue Typescript 文件中答案

【问题标题】：Unexpected Token : (colon) in Vue Typescript fileUnexpected Token : (冒号) 在 Vue Typescript 文件中
【发布时间】：2018-06-30 03:24:04
【问题描述】：

更新
事实证明，这个问题与使用过的样板有关。一种解决方法是不提取 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"
}

【问题讨论】：

标签： typescript npm vue.js vuejs2

【解决方案1】：

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

【讨论】：

在那个地方实际上需要它才能工作。事实证明，问题出在我使用的样板文件上，目前有一种解决方法。
与default 完美配合，不带引号。

【解决方案2】：

将default 括在引号中：

@Prop({ <strong>'default'</strong>: 'default ToDo' })

【讨论】：

与default 完美配合，不带引号。

【解决方案3】：

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

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

【讨论】：