无法使用 laragon 加载 Javascript 文件（ERR_ABORTED 404（未找到））

Question

我无法使用/访问 carousel.js 文件 - GET http://name.test/js/carousel.js net::ERR_ABORTED 404（未找到）

front-page.php

    <div class="row">
        <div class="col-lg-4">
            <div class="carousel_item carousel_item--visible">first post</div>
        </div>
        <div class="col-lg-4">
            <div class="carousel_item">second post</div>
        </div>
        <div class="col-lg-4">
            <div class="carousel_item">third post</div>
        </div>
    </div>

    <div class="carousel_actions">
        <button id="carousel_button--prev" aria-label="previous slide">
            <
        </button>
        <button id="carousel_button--next" aria-label="next slide">
            >
        </button>
    </div>
</div>
<script type="text/javascript" src="js/carousel.js"></script>""

JS代码：

let slidePosition = 0;
const slides = document.getElementsByClassName('carousel_item');
const totalSlides = slides.length;

document.getElementById('carousel_button--next').addEventListener("click", function() {
    moveToNextSlide();
});

document.getElementById('carousel_button--prev').addEventListener("click", function() {
    moveToPrevSlide();
});

function moveToNextSlide() {
    console.log('next works');
}

function moveToPrevSlide() {
    console.log('prev works');
}

functions.php

function load_js(){

    wp_enqueue_script('jquery');
    wp_register_script('bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery', false, true);
    wp_enqueue_script('bootstrap');
    wp_register_script('carousel', get_template_directory_uri() . '/js/carousel.js');
    wp_enqueue_script('carousel');
}
add_action('wp_enqueue_scripts', 'load_js');

文件结构

.
├── js
│   ├── bootstrap.min.js
│   └── carousel.js
├── index.php
├── front-page.php
└── functions.php

（那里还有其他文件，仅包括重要的文件以便于概览）

我很确定我输入了 carousel.js 文件的正确路径，谁能告诉我这里有什么问题？

Answer 1

1- 在您的 front-page.php 文件中，删除 script tag。 （即<script type="text/javascript" src="js/carousel.js"></script>）。您的 wp_enqueue_script 函数会负责将其加载到页面上！

2- 你也不需要那些wp_register_script 函数！在您的 functions.php 文件中删除它们！

3- 在functions.php 文件中，将以下 sn-p 替换为您自己的：

add_action('wp_enqueue_scripts', 'load_js');

function load_js()
{
  wp_enqueue_script('jquery');
  wp_enqueue_script('bootstrap', get_theme_file_uri('/js/bootstrap.min.js'), 'jquery', 1.0, true);
  wp_enqueue_script('carousel', get_theme_file_uri('/js/carousel.js'), NULL, 1.0, true);
}

这些应该可以为您解决问题！

当您加载页面时，右键单击它并查看源代码。您应该能够找到加载到源中的bootstrap 和carousel！

让我知道你是否可以让它工作！

Answer 2

所以如果你使用 Laravel，你需要使用 webpack.mix.js 来集成你的 JS