Laravel 9.x搭配Vite时出现Vue/require未定义问题求助

核心问题分析 #

你遇到的require is not defined和Vue is not defined本质是Vite与Webpack（Laravel Mix基于Webpack）的模块机制差异导致：

1. Vite原生支持ES模块，不兼容CommonJS的require语法
2. Vite生成的脚本为type="module"，执行时机晚于普通内联脚本，导致全局挂载的Vue未被加载

分步解决方案 #

1. 修复require is not defined错误 #

修改resources/js/app.js，将CommonJS的require替换为ES模块导入，并正确挂载Vue到全局：

import './bootstrap';
// 导入Vue所有导出并挂载到window对象
import * as Vue from 'vue';
window.Vue = Vue;

2. 解决Vue is not defined错误 #

两种可选方案，根据你的需求选择：

方案一：将内联脚本改为模块类型

直接修改Blade文件中的内联脚本，添加type="module"属性，确保与Vite模块执行顺序一致：

@push('scripts')
<script type="module">
    const app = Vue.createApp({
        data() {
            return {
                username: 'John Doe'
            }
        }
    });

    app.mount('#app');
</script>
@endpush

方案二：监听页面加载完成事件

如果不想修改脚本类型，可通过DOMContentLoaded事件确保Vue挂载后再执行内联代码：

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const app = Vue.createApp({
            data() {
                return {
                    username: 'John Doe'
                }
            }
        });

        app.mount('#app');
    });
</script>
@endpush

3. 验证Vite配置（无需修改你的现有配置） #

你的vite.config.js配置是正确的，确保Vue插件已正确引入即可：

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue(),
    ],
});

额外验证步骤 #

1. 确保依赖安装完整：执行npm install vue @vitejs/plugin-vue
2. 重启Vite开发服务：npm run dev
3. 生产环境重新构建资源：npm run build

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