带有 AlpineJS 的 Vite（在 Laravel 中）不起作用答案

【问题标题】：Vite (in Laravel) with AlpineJS not working带有 AlpineJS 的 Vite（在 Laravel 中）不起作用
【发布时间】：2022-08-19 23:21:45
【问题描述】：

根据迁移说明，我已从 Laravel Mix 迁移到 Laravel Vite。一切都在编译和工作，除了 Alpine。在我的控制台中，我得到以下信息。

ReferenceError：找不到变量：Alpine`

资源/app.js

import Alpine from \'alpinejs\';
window.Alpine = Alpine;

// Stores need to be defined before Alpine.start()
import \'./alpine-stores/modal\';

Alpine.start();

高山商店/莫代尔

Alpine.store(\'modal\', {
    active: false,
    id: null,
    open(id) {
        this.active = true
        this.id = id
        document.body.classList.add(\'overflow-hidden\')
        window.dispatchEvent(new CustomEvent(\'modalopened\'))
    },
    close() {
        this.active = false
        this.id = null
        document.body.classList.remove(\'overflow-hidden\')
        window.dispatchEvent(new CustomEvent(\'modalclosed\'))
    }
})

你能显示你的 config/vite.php 吗？
不知道商店类似于扩展，但如果是这样，那么根据文档，它需要在 window.Alpine 分配之前发生。
我通过将import Alpine from ‘alpinejs’ 添加到模态文件来“修复”它（我有多个并将其添加到所有文件中）。不确定这是否是正确的方法，但现在可以使用……

标签： laravel laravel-vite

【解决方案1】：

由于 vite，我们不能使用 require 语句。因此，在为数据和存储分离文件时更加复杂。我在 alpinejs 网站上找不到任何官方信息。我也遇到了同样的问题并以这种方式解决了这类问题。

高山商店/莫代尔

export default () => ({ 
    active: false,
    id: null,
    open(id) {
        this.active = true
        this.id = id
        document.body.classList.add('overflow-hidden')
        window.dispatchEvent(new CustomEvent('modalopened'))
    },
    close() {
        this.active = false
        this.id = null
        document.body.classList.remove('overflow-hidden')
        window.dispatchEvent(new CustomEvent('modalclosed'))
    }
})

资源/app.js

import Alpine from 'alpinejs'
window.Alpine = Alpine

// Stores need to be defined before Alpine.start()
import modal from './alpine-stores/modal.js'
Alpine.data('modal', modal)

Alpine.start()

【讨论】：