此处不允许使用特性 setup 报错

Question

这是Login.vue代码

<!---->
<template><!--根标签-->
  <!--    根目录           -->
  <div>
    <!--    最小高度100vh            超出部分隐藏       flex布局         上下居中-->
    <div style="min-height: 100vh; overflow: hidden;display: flex;align-items: center">
      <div style="width: 350px">
        <!--      绑定了form对象    -->
        <el-form :model="data.form" label-width="auto" style="max-width: 600px">
          <el-form-item label="账号">
            <el-input v-model="data.form.username"/>
            <!--绑定username-->
          </el-form-item>
        </el-form>

      </div>
    </div>
  </div>
</template>


<!--vue3语法-->
<script setup>
import {reactive} from "vue";
<!--提供form对象-->
const data = reactive({
  //讲form放入作为对象展示出来
  form: {}
})
</script>

这个是vue文件下package.json文件

{
  "name": "vue",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "axios": "^1.6.2",
    "element-plus": "^2.4.2",
    "sass": "^1.69.5",
    "unplugin-element-plus": "^0.8.0",
    "vue": "^3.3.4",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.4.0",
    "unplugin-auto-import": "^0.16.7",
    "unplugin-vue-components": "^0.25.2",
    "vite": "^4.4.11"
  }
}

这个是vue底下router文件下的index.js文件代码

import {createRouter, createWebHistory} from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'Manager',
      component: () => import('@/views/Manager.vue'),
      redirect: '/home',
      children: [
        { path: 'home', name: 'Home', component: () => import('@/views/manager/Home.vue')},
        { path: 'course', name: 'Course', component: () => import('@/views/manager/Course.vue')},
      ]
    },
    { path: '/login',
      name: 'Login',
      component: () => import('@/views/Login.vue'),}//@表示src
  ]
})

export default router

这个是vue文件底下的vite.config.js文件代码

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 导入对应包

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

import ElementPlus from 'unplugin-element-plus/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver(
          { importStyle: 'sass' }
      )],
    }),
    Components({
      resolvers: [ElementPlusResolver(
          { importStyle: 'sass' }
      )],
    }),

    // 按需定制主题配置
    ElementPlus({
      useSource: true,
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 自动导入定制化样式文件进行样式覆盖
        additionalData: `
          @use "@/assets/css/index.scss" as *;
        `,
      }
    }
  }
})

运行进入login界面之后就会出现报错

在script代码块区域会有此处不允许使用特性 setup 的警告

不知道问题在哪,报错查询也没有找到问题

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

您好！根据您提供的信息，看起来问题出在<script setup>的使用上。<script setup>是Vue 3的一个新特性，它允许你以一种更简洁的方式编写组件。不过，要使用这个特性，确保你的项目配置正确支持它。

首先，让我们检查<script setup>语法。从您提供的代码片段来看，似乎有一个小错误：

import {reactive} from "vue";

应该是：

import { reactive } from 'vue';

注意导入reactive时使用了正确的单引号，并且reactive前后有空格。

接下来，确保您的Vite配置正确。根据您提供的package.json文件，您已经安装了@vitejs/plugin-vue插件，这是支持<script setup>所必需的。但是，还需要检查vite.config.js文件（如果存在）以确认是否正确配置了Vue插件。

通常，Vite的默认配置就支持<script setup>，但如果您进行了自定义配置，可能需要确保以下几点：

1. 确保@vitejs/plugin-vue插件被正确引入并使用在vite.config.js中。
2. 如果您修改了默认配置，请检查是否有任何设置可能影响<script setup>的解析。

此外，根据您提供的第二个截图，似乎提示您“此处不允许使用特性 setup”，这可能意味着IDE或编辑器的插件或设置有问题。尝试以下步骤：

• 确保您的IDE或编辑器使用的是最新版本的Vue语言插件。
• 检查IDE或编辑器的设置，确保没有禁用或配置错误<script setup>。

如果以上步骤都无法解决问题，您可以尝试以下操作：

• 清除node_modules和重新安装依赖：rm -rf node_modules && npm install（或使用yarn）。
• 重启您的开发服务器。

希望这些建议能帮助您解决问题。如果问题依旧存在，请提供更多的信息，我会尽力提供进一步的帮助。