[plugin:vite:vue] [vue/compiler-sfc] Missing semicolon. (2:11) C:/Users/邬东林/Desktop/ziyuan/vue/Login/src/App.vue 5 | </template> 6 | <script setup> 7 | mounted() { 8 | const video = document.getElementById('myVideo'); 9 | video.style.display = 'block';

这个错误提示是在使用 Vite 和 Vue 的时候出现的，它是因为你在 App.vue 文件的 <script setup> 标签中缺少了一个分号。你需要在 mounted() 函数的最后加上一个分号，代码应该是这样的：

<script setup>
  mounted() {
    const video = document.getElementById('myVideo');
    video.style.display = 'block';
  };
</script>

加上分号后，你应该能够正常编译运行你的代码了。

相关问题

[plugin:vite:vue] [vue/compiler-sfc] Unexpected token (100:5)

`[plugin:vite:vue] [vue/compiler-sfc] Unexpected token (100:5)` 这样的错误通常发生在 Vue.js 项目中，当你尝试编译 .sfc（Single File Component）文件时，Vite 或 Vue 编译器识别到了语法上的异常。这可能是由于以下几个原因：

1. **不兼容的依赖**[^1]:

   Error: Failed to resolve vue/compiler-sfc.
   @vitejs/plugin-vue requires vue (>=3.2.25) to be present in the dependency tree.

确保你的项目中安装并正确引入了 Vue 3.2.25或更高版本，因为Vite插件需要这个版本来编译Vue组件。

2. **SFC 文件语法问题**[^2]:
报错提到"Missing semicolon"，可能是因为在Vue组件的某个地方少了一个分号(`;`)。请逐行检查代码，特别是在导入语句、对象字面量、表达式结束处，确认每个语句都以正确的分号结尾。

3. **ESLint配置**:
如果你在项目中启用了ESLint，它可能会对分号的使用有严格的规则。检查.eslintrc.js文件，确认vetur或eslint插件配置允许.vue文件中使用分号。

4. **特殊字符或空格**:
检查100行5列是否有意外的特殊字符，如非预期的空格或未关闭的引号，这些都可能导致解析错误。

修复这个问题的方法包括更新依赖、修复代码语法错误、调整ESLint配置以及清理潜在的干扰字符。一旦找到问题所在，就能解决问题。如果以上都不适用，请分享具体代码片段以便更准确地定位问题。

[plugin:vite:vue] At least one <template> or <script> is required in a single file component. /Users/shenglei/Downloads/vue/ivue/src/App.vue at Object.parse$2 [as parse] (/Users/shenglei/Downloads/vue/ivue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1275:7) at createDescriptor (/Users/shenglei/Downloads/vue/ivue/node_modules/@vitejs/plugin-vue/dist/index.cjs:74:43) at handleHotUpdate (/Users/shenglei/Downloads/vue/ivue/node_modules/@vitejs/plugin-vue/dist/index.cjs:2118:26) at async handleHMRUpdate (file:///Users/shenglei/Downloads/vue/ivue/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:39971:33) at async onHMRUpdate (file:///Users/shenglei/Downloads/vue/ivue/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:63419:17) at async FSWatcher.<anonymous> (file:///Users/shenglei/Downloads/vue/ivue/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:63438:9 Click outside or fix the code to dismiss. You can also disable this overlay by setting server.hmr.overlay to false in vite.config.js.

这个警告信息是由Vite插件引起的，它要求Vue单文件组件中至少包含一个`<template>`或`<script>`标签。这是因为Vue单文件组件需要至少包含一个模板或脚本，才能被正确地解析和编译。

要解决这个警告信息，你可以检查你的Vue单文件组件是否包含了至少一个`<template>`或`<script>`标签。如果没有，你需要添加一个模板或脚本标签。例如，以下代码展示了一个包含了模板和脚本标签的简单Vue单文件组件：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello Vue!'
      };
    }
  };
</script>

在上面的代码中，我们定义了一个包含模板和脚本标签的Vue单文件组件。模板标签包含了一个简单的`<h1>`标签，用于显示一条消息。脚本标签包含了一个简单的Vue组件定义，其中包含了一个`data`选项，用于存储Vue组件的数据。现在你可以保存这个文件，并重新运行Vite，这个警告信息应该就不会再出现了。