Vue CLI4运行带script setup的Vue3单文件组件报错如何解决？

问题根本原因 #

• 你使用的@vue/cli 4.5.14默认全局依赖的是Vue 2.x版本，ref是Vue 3才对外暴露的API，自然会出现导出失败的报错
• 你本地安装的eslint-plugin-vue版本过低，不支持<script setup>相关的校验规则，所以会提示规则不存在

解决步骤 #

方法一：升级Vue CLI到5.x版本（推荐） #

1. 先全局卸载旧版本Vue CLI：

npm uninstall -g @vue/cli

2. 安装最新稳定版Vue CLI：

npm install -g @vue/cli@latest

3. 全局安装Vue 3对应的单文件运行依赖：

npm install -g @vue/cli-service-global

4. 升级eslint-plugin-vue到支持<script setup>的版本（要求版本≥8.0.0）：

npm install -g eslint-plugin-vue@latest

5. 修改你的.eslintrc.json配置如下：

{
  "env": {
    "node": true,
    "browser": true
  },
  "parserOptions": {
    "ecmaVersion": "latest"
  },
  "plugins": ["vue"],
  "rules": {
    "vue/script-setup-uses-vars": "error",
    "no-unused-vars": "off",
    "vue/no-unused-vars": "warn"
  }
}

修改完成后重新执行vue serve myfile.vue即可正常运行。

方法二：使用临时Vite项目运行（无需调整全局CLI配置） #

如果只是需要快速运行单个Vue 3文件，不需要单独调试全局运行命令，可以直接用Vite生成临时项目运行：

1. 执行命令生成Vite + Vue 3临时项目：

npm create vite@latest temp-vue-demo -- --template vue

2. 把你的.vue文件放到项目的src目录下替换App.vue，执行npm install && npm run dev即可运行，Vite原生支持<script setup>语法，不需要额外配置ESLint规则即可正常识别模板中使用的变量。

内容的提问来源于stack exchange，提问作者VdfX89