NodeJS Laravel + Vite生成空的app.js文件

woobm2wo  于 2023-06-05  发布在  Node.js
关注(0)|答案(1)|浏览(209)

我在Laravel项目中使用Vite进行汇编时遇到了一个问题,即其中一个文件(resources/assets/js/app.js)总是编译为空,我不知道如何解决这个问题。
vite.config.js

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/assets/css/app.css',
                'resources/assets/css/home.css',
                'resources/assets/js/app.js',
                'resources/assets/js/navbar.js',
                'resources/assets/js/home.js'
            ],
            refresh: true,
        }),
    ]
});

app.js

function disableScroll() {
    document.body.classList.add('-overflow-disabled');
}

function enableScroll() {
    document.body.classList.remove('-overflow-disabled');
}

function encb(str) {
    return window.btoa(unescape(encodeURIComponent(str)));
}

function decb(str) {
    return decodeURIComponent(escape(window.atob(str)));
}

async function scrollAnimate(element, name) {
    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate__animated', name);
                observer.unobserve(entry.target);
            }
        });
    }, options = {
        rootMargin: '0px',
        threshold: 0.2
    });
    element.forEach(e => observer.observe(e));
}
k75qkfdt

k75qkfdt1#

是的,我也面临着同样的问题。在我的例子中,问题是一个空的资源app.css文件。要解决这个问题,您需要向文件添加一些CSS样式。下面是一个例子:

html {
    border-width: 0;
}

添加了必要的CSS样式后,需要运行build命令来生成CSS文件。此命令将编译和处理CSS代码,生成可包含在项目中的最终输出文件。
确保为项目安装了必要的生成工具和依赖项。生成命令可能因特定的生成设置而异。通常情况下,它可能是这样的:

npm run build

yarn build

此命令将触发构建过程,其中包括使用应用的样式编译和生成CSS文件。
运行build命令后,检查项目的生成输出目录或在项目配置中指定的位置。您应该可以找到生成的CSS文件,该文件将包含您在app.css文件中添加的样式。
请记住在HTML中包含生成的CSS文件,或根据需要将其导入到项目中,以使样式生效。
我希望这对你有帮助!如果你还有什么问题就告诉我。

相关问题