Vue中使用<script setup>报错，无法运行Vite服务及构建

问题场景 #

• Vue 3项目中，App.vue采用<script setup>语法导入Page、Top组件
• 运行npm run dev或npm run build时，触发解析错误：提示需安装@vitejs/plugin-vue处理.vue文件，项目无法编译启动
• 尝试用module.exports = { publicPath: '' }配置后，仍报错且页面空白

解决方法 #

1. 补全并配置Vue插件 #

Vite必须依赖@vitejs/plugin-vue解析.vue文件，可能是依赖未安装或配置缺失：

• 安装插件：

npm install @vitejs/plugin-vue --save-dev

• 在vite.config.js中添加插件配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

2. 修正路径配置（适配Vite语法） #

Vite不支持Webpack的publicPath和module.exports语法，需改用base字段：

• 修改vite.config.js：

export default defineConfig({
  plugins: [vue()],
  base: '' // 对应原publicPath的需求
})

3. 清理缓存并重装依赖 #

避免缓存或依赖冲突导致的异常：

• 删除旧依赖文件：

rm -rf node_modules package-lock.json

• 重新安装依赖：

npm install

• 强制启动开发服务器清理缓存：

npm run dev -- --force

验证结果 #

执行npm run dev后开发服务器正常启动，组件渲染正常；npm run build生成的产物可正常访问，页面不再空白。

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