此处不允许使用特性 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及阿里嘎多学长共同生成、有用望采纳：

---

根据您提供的信息，我注意到几个可能的问题点，让我们一一排查并解决它们。

1. Vue 3 和 Vite 的版本兼容性： 您提供的 package.json 文件显示，Vue 的版本是 ^3.3.4，而 Vite 的版本是 ^4.4.11。<script setup> 语法是在 Vue 3 和 Vite 中支持的，所以版本兼容性应该不是问题。

2. <script setup> 的使用： 您的 <script setup> 标签中确实存在一个小错误。在导入 reactive 时，您写的是 import (reactive} from "vue";，这里的 { 应该是一个空格。正确的写法应该是：

   import { reactive } from 'vue';
   

3. 语法错误： 在 reactive 函数的使用上，您的代码片段中 const data = reactive(t 缺少了闭合的圆括号。正确的写法应该是：

   const data = reactive({
     form: {}
   });
   

4. Vite 配置： 您的 vite.config.js 配置看起来没有问题，它正确地设置了 Vue 插件和相关的别名等配置。

5. 项目依赖： 根据 package.json，所有依赖都已正确列出，并且没有版本冲突的迹象。

综上所述，您需要做的修改如下：

• 修正 <script setup> 中的导入语法错误。
• 完成 reactive 函数调用的闭合圆括号。
• 确保没有其他语法错误。

修正后的 <script setup> 应该如下所示：

<script setup>
import { reactive } from 'vue';

// 提供form对象
const data = reactive({
  form: {}
});
</script>

应用这些更改后，再次运行您的项目，看看是否解决了编译错误。如果问题仍然存在，请确保您的开发环境和工具链是最新的，并且没有其他配置或依赖问题。如果需要进一步的帮助，请随时告诉我。