Laravel 11 和 Vite / 嵌套手风琴奇怪的脚本和 CSS 生产行为

Question

我是 Laravel 新手，希望就以下问题获得一些帮助：

下面的代码在开发环境中完美运行，按预期设置正确的高度并切换类。然而，在生产环境中，它设置了不正确的高度，并且切换类不起作用。

event.preventDefault();

var targetElement = event.currentTarget;

if(targetElement.classList.contains("openFaq")){

    targetElement.classList.remove("openFaq");
    targetElement.nextElementSibling.style.height = 0 + "px";
     
} else if (!targetElement.classList.contains("openFaq")){
    targetElement.classList.add("openFaq");
    targetElement.nextElementSibling.style.height =    targetElement.nextElementSibling.scrollHeight + "px";
}

我尝试过：

1. 禁用 Vite 缓存
2. 禁用 Vite 缩小

部署脚本

cd /home/forge/test.labforty.com
git pull origin $FORGE_SITE_BRANCH

$FORGE_COMPOSER install --no-dev --no-interaction --prefer-dist --optimize-autoloader

( flock -w 10 9 || exit 1
    echo 'Restarting FPM...'; sudo -S service $FORGE_PHP_FPM reload ) 9>/tmp/fpmlock

if [ -f artisan ]; then
    $FORGE_PHP artisan migrate --force
fi


npm install
npm run build

   Full code

import "./bootstrap";


document.addEventListener("DOMContentLoaded", function () {


//FAQ Accordion
    var acc = document.querySelectorAll(".accordion");
    var accInner = document.querySelectorAll(".accordion-inner");

    for (let i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function () {

            this.classList.toggle("open");

            // Close other accordion tabs
            for (let k = 0; k < acc.length; k++) {
                if (acc[k] !== this) {
                    if (acc[k].nextElementSibling.style.maxHeight) {
                        acc[k].nextElementSibling.style.maxHeight = null;
                        acc[k].classList.toggle("open");
                    }
                }
            }

            var panel = this.nextElementSibling;

            if (panel.style.maxHeight) {
                panel.style.maxHeight = null;
            } else {
                panel.style.maxHeight = 1000 + "px";
            }
        });

        for (let j = 0; j < accInner.length; j++) {
            accInner[j].addEventListener("click", function (event) {

                event.preventDefault();

                var targetElement = event.currentTarget;

                if(targetElement.classList.contains("openFaq")){
                    targetElement.classList.remove("openFaq");
                    targetElement.nextElementSibling.style.height = 0 + "px";
                } else if (!targetElement.classList.contains("openFaq")){
                    targetElement.classList.add("openFaq");
                    targetElement.nextElementSibling.style.height = targetElement.nextElementSibling.scrollHeight + "px";
                }


                // Close other inner accordion tabs
                for (let l = 0; l < accInner.length; l++) {
                    if (accInner[l] !== this) {
                        if (accInner[l].nextElementSibling.style.height) {
                            accInner[l].nextElementSibling.style.height = "";
                            if(accInner[l].classList.contains("openFaq")){
                                accInner[l].classList.toggle("openFaq");
                            }
                        }
                    }
                }


            });
        }
    }

//Mobile Accordion
    var accMobileBtn = document.getElementsByClassName("accordionBtn");
    var mobileMenuBtn = document.getElementsByClassName("mobileMenuBtn");

    mobileMenuBtn[0].addEventListener("click", function () {
        document.body.classList.toggle("no-scroll");
    });

    Array.from(accMobileBtn).forEach((mobileBtn) => {
        mobileBtn.addEventListener("click", function () {
            var panelMobile = this.nextElementSibling;
            this.classList.toggle("open");

            // Close other accordion tabs
            for (let m = 0; m < accMobileBtn.length; m++) {
                if (accMobileBtn[m] !== this) {
                    if (accMobileBtn[m].nextElementSibling.style.maxHeight) {
                        accMobileBtn[m].nextElementSibling.style.maxHeight = null;
                        accMobileBtn[m].classList.toggle("open");
                    }
                }
            }

            if (
                panelMobile.style.maxHeight !== "" &&
                panelMobile.style.maxHeight !== "0px"
            ) {
                panelMobile.style.maxHeight = null;
            } else {
                panelMobile.style.maxHeight = 

panelMobile.scrollHeight + "px";
            }
        });
    });



});

Answer 1

这取决于您的分段设置。常见问题是 .env 中的配置错误。开发环境和生产环境应该有所不同。 Laravel 不会在开发环境中编译 javascript 库，因此脚本会按原样加载。并且生产环境需要优化脚本。 mix 的官方文档参考 - https://laravel.com/docs/11.x/mix 对于早期版本的 laravel

npm run build

应该是

npm run prod

来编译生产混合 - https://laravel.com/docs/8.x/mix