vue3之常范低级错误の错误指南

最新推荐文章于 2025-03-11 11:05:57 发布

原创最新推荐文章于 2025-03-11 11:05:57 发布 · 8.4k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

Hu153155

关注

标签

#vue

分类前端开发

本文列举了在使用Vue3开发过程中常见的错误类型，包括符号错误、单词拼写错误、未定义变量、标签不完整以及属性符号问题，并提供了详细的错误定位和解决建议。在src/homeview.vue中，错误主要集中在65-69行的分号误用，84行的value单词拼写，81行的未定义变量avc，以及标签缺失结束符和属性名包含非法字符的问题。了解这些错误有助于提升Vue3编码质量。

1.符号写错

Compiled with problems:X

ERROR in ./src/views/HomeView.vue?vue&type=script&lang=ts&setup=true (./node_modules/unplugin/dist/webpack/loaders/transform.js??ruleSet[1].rules[38].use[0]!./node_modules/unplugin/dist/webpack/loaders/transform.js??ruleSet[1].rules[39].use[0]!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/HomeView.vue?vue&type=script&lang=ts&setup=true)

Module Error (from ./node_modules/vue-loader/dist/index.js):
[@vue/compiler-sfc] Unexpected token, expected "," (8:58)

C:\hu\src\views\HomeView.vue
65 |  const rules = reactive({
66 |    userid: [
67 |      { required: true, message: "请输入用户名", trigger: "blur" };
   |                                                            ^
68 |      { min: 3, max: 18, message: "长度3-18", trigger: "blur" },
69 |    ],

第一行英文意思是编程错误
第二行是指出错误的文件是在src路径下的homeview.vue里面
下面一段指出错误是在这个文件的65-69行里面，^指向的地方就是错误的地方，次错误是应该用逗号确用成了分号。

2.单词打错

Compiled with problems:X

ERROR


C:\hu\src\views\HomeView.vue
  84:3  error  Must use `.value` to read or write the value wrapped by `ref()`  vue/no-ref-as-operand

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

第一行还是说编程错误，错误的文件还是在src路径下的homeview.vue里面，错误的地方是在84行的第三个字符，这段英文是说你必须用.value去获取ref（）的值，此错误是因为value的单词打错。

3.没有定义的变量

Compiled with problems:X

ERROR


C:\hu\src\views\HomeView.vue
  81:12  error  'avc' is not defined  no-undef

✖ 2 problems (1 error, 1 warning)

错误路径是在src路径下的homeview.vue里面，81行第12个字符avc没有定义，此时需要定义一下avc或者删除，也有可能是单词打错，单词打错的话更改一下就好了。

4.标签没写完整

ERROR in ./src/views/HomeView.vue

Module Error (from ./node_modules/vue-loader/dist/index.js):

VueCompilerError: Element is missing end tag.
at C:\hu\src\views\HomeView.vue:49:9
47 |            <span @click="changePic">换一换</span>
48 |          </el-form-item>
49 |          <el-form-item>
   |          ^
50 |            <router-link to="/admin">立即注册</router-link>
51 |            <router-link to="/admin">忘记密码</router-link

错误路径是在src路径下的homeview.vue里面，Element is missing end tag的意思是标签没有找到结束标签，下面^指向的标签就是错误的地方，可能是此标签也可能是此标签里面的某个标签。此错误是router-link的结束标签确了一个>

5.属性的符号不对
在AboutView发生错误

VueCompilerError: Attribute name cannot contain U+0022 ("), U+0027 (’), and U+003C (<).
vue编译错误：属性name 不能不包含 “ ‘ <
at C:\youmi\src\views\AboutView.vue:8:2
在第8行的第2个字符