Laravel+Vue+Vite构建报错：语法解析失败，如何解决？

1. 确认Vite Vue插件配置与安装 #

Vite依赖@vitejs/plugin-vue处理Vue单文件组件，先检查vite.config.js是否正确引入并配置该插件：

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                compilerOptions: {
                    // 若使用自定义标签，需在此声明，比如isCustomElement: tag => tag.startsWith('my-')
                }
            }
        }),
    ],
});

如果未安装该插件，执行：

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

2. 配置ES语法兼容目标 #

若代码使用了较新的ES语法（如可选链?.、空值合并??），需在vite.config.js中指定构建目标，避免语法解析失败：

export default defineConfig({
    // ...其他配置
    build: {
        target: 'es2020' // 可根据项目情况调整为es2019等更低版本
    }
});

3. 排查Vue组件语法细节 #

即使确认代码无误，也需排查以下常见问题：

• <script setup>语法是否符合Vue3规范，比如变量声明、组件导入方式
• 模板中是否存在未闭合标签、错误的指令绑定（如v-for未设置唯一key）
• 是否使用了Vue3已移除的Vue2特性（如过滤器filters）

4. 清除缓存并重装依赖 #

缓存或依赖损坏可能导致构建异常，执行以下步骤：

# 删除依赖文件夹和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 清除Vite缓存
npx vite clear
# 重新构建
npm run build

5. 匹配Laravel Vite插件版本 #

Laravel与laravel-vite-plugin版本需兼容，Laravel 9.19建议使用对应版本的插件，可尝试升级插件：

npm install laravel-vite-plugin@latest --save-dev

6. 获取详细报错信息 #

若截图信息不够具体，执行带调试参数的构建命令，定位错误文件和行号：

npm run build -- --debug

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