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

Question

我无法 use/access carousel.js 文件 - GET http://name.test/js/carousel.js net::ERR_ABORTED 404（未找到）

前-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

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

Answer 2

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 文件中将以下代码段替换为您自己的代码段：

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 加载到源中！

如果你能让它工作，请告诉我！

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

Javascript file won't load using laragon (ERR_ABORTED 404 (Not Found))

javascript

php

wordpress

wordpress-theming

laragon