Alpine.js在新Laravel+Vite项目中无法识别的问题求助

步骤1：修正Alpine.js的导入与全局挂载 #

你的app.js导入路径错误，且未将Alpine挂载到全局，导致Blade模板和其他JS文件无法访问。修改app.js如下：

import './bootstrap';
// 直接从node_modules导入Alpine，无需自定义相对路径
import Alpine from 'alpinejs';

// 将Alpine挂载到全局window对象，让全局环境可访问
window.Alpine = Alpine;

// 启动Alpine
Alpine.start();

// 验证版本输出
console.log(Alpine.version);

步骤2：简化Vite配置（可选但推荐） #

你的vite.config中配置的Alpine别名属于冗余设置，直接从node_modules导入更简洁，修改后的配置：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

步骤3：确保Blade模板正确引入Vite资源 #

在你的主布局Blade文件（如resources/views/layouts/app.blade.php）中，必须通过Vite指令引入编译后的资源：

<head>
    <!-- 其他头部内容 -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

验证操作 #

重启Vite开发服务器：

npm run dev

刷新页面后，打开浏览器控制台应能看到Alpine的版本号，同时Blade模板中的Alpine指令（如x-data）可正常触发交互。

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