在我的 vue 项目上运行command
nmp run serve"vue-class-component": "^7.2.6", "vue-property-decorator": "^9.0.2",我的主要问题是这个错误
Module parse failed: Unexpected character '@' Vue Class-Bassed和
11:0 error Parsing error: Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead.> [email protected] serve C:\Users\Pawel\Unity\ArCore Portal\Heros_III_JS\hero_iii_js
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
ERROR Failed to compile with 3 errors 13:37:33
error in ./src/App.vue
Module Error (from ./node_modules/eslint-loader/index.js):
C:\Users\Pawel\Unity\ArCore Portal\Heros_III_JS\hero_iii_js\src\App.vue
8:14 error Replace `'ts'` with `"ts"` prettier/prettier
16:14 error Delete `,` prettier/prettier
17:4 error Delete `,` prettier/prettier
✖ 3 problems (3 errors, 0 warnings)
3 errors and 0 warnings potentially fixable with the `--fix` option.
@ ./src/main.js 6:0-28 10:13-16
@ multi (webpack)-dev-server/client?http://192.168.43.30:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
error in ./src/components/boardTest.vue
Module Error (from ./node_modules/eslint-loader/index.js):
C:\Users\Pawel\Unity\ArCore Portal\Heros_III_JS\hero_iii_js\src\components\boardTest.vue
11:0 error Parsing error: Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead.
5 | import Point from "./point.vue";
6 | @Component
> 7 | export default class BoardTest extends Vue {
| ^
8 | board = new Board();
9 | creature = new Creature();
10 | unitTestPoint = 1;
✖ 1 problem (1 error, 0 warnings)
@ ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=ts& 11:0-51 16:4-13
@ ./src/App.vue?vue&type=script&lang=ts&
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.43.30:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
error in ./src/components/boardTest.vue?vue&type=script&lang=ts&
Module parse failed: Unexpected character '@' (10:0)
File was processed with these loaders:
PS C:\Users\Pawel\Unity\ArCore Portal\Heros_III_JS\hero_iii_js> npm run serve
> [email protected] serve C:\Users\Pawel\Unity\ArCore Portal\Heros_III_JS\hero_iii_js
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
ERROR Failed to compile with 1 errors 13:46:14
error in ./src/components/boardTest.vue?vue&type=script&lang=ts&
Module parse failed: Unexpected character '@' (10:0)
File was processed with these loaders:
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| import Point from "./point.vue";
|
> @Component
| export default class BoardTest extends Vue {
| board = new Board();
@ ./src/components/boardTest.vue?vue&type=script&lang=ts& 1:0-178 1:194-197 1:199-374 1:199-374
@ ./src/components/boardTest.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=ts&
@ ./src/App.vue?vue&type=script&lang=ts&
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.43.30:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
点.vue
<template>
<div></div>
</template>
<script lang='ts'>
import { Vue, Component } from "vue-property-decorator";
@Component
export default class Point extends Vue {
x;
y;
created(aX, aY) {
this.x = aX;
this.y = aY;
}
}
</script>
<style></style>
boardTest.vue
<template>
<div></div>
</template>
<script lang='ts'>
import { Vue, Component } from "vue-property-decorator";
import Creature from "./creature.vue";
import Board from "./board.vue";
import Point from "./point.vue";
@Component
export default class BoardTest extends Vue {
board = new Board();
creature = new Creature();
unitTestPoint = new Point();
mapShouldHaveKeyAndValue() {
this.board.add(this.unitTestPoint, this.creature);
if (this.board.getVal(this.unitTestPoint) === undefined) {
throw "Exception: => Creature dla tego pola zwraca undefined";
}
}
}
</script>
<style></style>
应用程序.vue
<template>
<div>
<unitTests />
<BoardTest />
</div>
</template>
<script lang='ts'>
import unitTests from "./components/unitTests.vue";
import { Component, Vue } from "vue-property-decorator";
import BoardTest from "./components/boardTest.vue";
export default {
name: "App",
components: {
unitTests,
BoardTest,
},
};
</script>
<style></style>
package.json
{
"name": "hero_iii_js",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-vue": "^6.2.2",
"vue-class-component": "^7.2.6",
"vue-property-decorator": "^9.0.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/recommended",
"plugin:prettier/recommended",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"no-unused-vars": "off"
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
下面的 webpack 规则帮助我避免同样的
Unexpected character '@'// webpack.base.conf.js
module.exports = {
module: {
rules: [
{
test: /\.ts$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
transpileOnly: true
}
},
]
}
}
我遇到了这个问题，最后看来我的环境还没有完全设置好。
您需要配置 eslint 以支持 typescript，因为 eslint 不支持 开箱即用地支持它。首先，您需要安装 @typescript-eslint/parser 然后@typescript-eslint/eslint-plugin。
这个相关主题和 rhn-chn 接受的答案极大地描述了您应该采取哪些步骤才能使其正常工作。