БЛОГ НА HUSL


Путь к файлу main.js

Автор вопроса: vladwebsearch

См. Подключение css файлов. Я немного подредактировал код файла public/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required Meta -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Title For This Document -->
    <title> Karte - Multipurpose E-Commerce Html Template</title>
    <!--<base href="/">-->
    <!-- Favicon For This Document -->
    <link rel="shortcut icon" href="../src/assets/images/logo/favicon-32x32.png" type="image/x-icon">
    <!-- Bootstrap 5 Css -->
    <link href="../src/assets/css/bootstrap.5.1.1.min.css">
    <!-- Google fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <!-- FlatIcon Css -->
    <link href="../src/assets/fonts/flaticon.css">

    <!-- Slick Slider Css -->
    <link href="../src/assets/css/plugin/slick.css">
    <!--  Ui Tabs Css -->
    <link href="../src/assets/css/plugin/jquery-ui.min.css">
    <!-- Magnific-popup Css -->
    <link href="../src/assets/css/plugin/magnific-popup.css">
    <!-- Nice Select Css -->
    <link href="../src/assets/css/plugin/nice-select.v1.0.css">
    <!-- Animate Css -->
    <link href="../src/assets/css/plugin/animate.css">
    <!-- Style Css -->
    <link href="../src/assets/css/style.css">

</head>

<body class="shoe">
<!-- ==========Preloader========== -->
<div class="loader"><span>Karte...</span></div>
<!-- ==========Preloader========== -->
<!--===scroll bottom to top===-->
<a href="#0" class="scrollToTop"><i class="flaticon-up-arrow"></i></a>
<!--===scroll bottom to top===-->

<div id="app"></div>
<!--==== Js Scripts Start ====-->
<!-- Jquery v3.6.0 Js -->
<script src="assets/js/jqurey.v3.6.0.min.js"></script> <!-- Popper v2.9.3 Js -->
<script src="assets/js/popper.v2.9.3.min.js"></script> <!-- Bootstrap v5.1.1 js -->
<script src="assets/js/bootstrap.v5.1.1.min.js"></script> <!-- jquery ui js -->
<script src="assets/js/plugin/jquery-ui.min.js"></script> <!-- Parallax js -->
<script src="assets/js/plugin/jarallax.min.js"></script> <!-- Isotope js -->
<script src="assets/js/plugin/isotope.js"></script> <!-- Slick Slider Js -->
<script src="assets/js/plugin/slick.min.js"></script> <!-- magnific-popup v2.3.4 Js -->
<script src="assets/js/plugin/jquery.magnific-popup.min.js"></script> <!-- Tweenmax v2.3.4 Js -->
<script src="assets/js/plugin/tweenMax.min.js"></script> <!-- Nice Select Js -->
<script src="assets/js/plugin/nice-select.v1.0.min.js"></script> <!-- Wow js -->
<script src="assets/js/plugin/wow.v1.3.0.min.js"></script> <!-- Wow js -->
<script src="assets/js/plugin/jquery.countdown.min.js"></script> <!-- Main js -->
<script src="assets/js/main.js"></script>
<!--==== Js Scripts End ====-->

<script src="../src/main.js"></script>
</body>

</html>

Структура папок

Структура проекта

В результате отображается страница со следующими ошибками

введите сюда описание изображения

Подскажите как устранить ошибки (как правильно задать путь к файлу main.js в том числе). Файл main.js лежит в папке src

введите сюда описание изображения

P.S. Когда код был следующим

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required Meta -->
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Title For This Document -->
  <title> Karte - Multipurpose E-Commerce Html Template</title>
  <!--<base href="/">-->
  <!-- Favicon For This Document -->
  <link rel="shortcut icon" href="../src/assets/images/logo/favicon-32x32.png" type="image/x-icon">
  <!-- Bootstrap 5 Css -->
  <link href="../src/assets/css/bootstrap.5.1.1.min.css">
  <!-- Google fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
  <!-- FlatIcon Css -->
  <link href="../src/assets/fonts/flaticon.css">

  <!-- Slick Slider Css -->
  <link href="../src/assets/css/plugin/slick.css">
  <!--  Ui Tabs Css -->
  <link href="../src/assets/css/plugin/jquery-ui.min.css">
  <!-- Magnific-popup Css -->
  <link href="../src/assets/css/plugin/magnific-popup.css">
  <!-- Nice Select Css -->
  <link href="../src/assets/css/plugin/nice-select.v1.0.css">
  <!-- Animate Css -->
  <link href="../src/assets/css/plugin/animate.css">
  <!-- Style Css -->
  <link href="../src/assets/css/style.css">

</head>

<body class="shoe">
  <!-- ==========Preloader========== -->
  <div class="loader"><span>Karte...</span></div>
  <!-- ==========Preloader========== -->
  <!--===scroll bottom to top===-->
  <a href="#0" class="scrollToTop"><i class="flaticon-up-arrow"></i></a>
  <!--===scroll bottom to top===-->

  <div id="app"></div>
  <!--==== Js Scripts Start ====-->
  <!-- Jquery v3.6.0 Js -->
  <script src="../src/assets/js/jqurey.v3.6.0.min.js"></script>
  <!-- Popper v2.9.3 Js -->
  <script src="../src/assets/js/popper.v2.9.3.min.js"></script>
  <!-- Bootstrap v5.1.1 js -->
  <script src="../src/assets/js/bootstrap.v5.1.1.min.js"></script>
  <!-- jquery ui js -->
  <script src="../src/assets/js/plugin/jquery-ui.min.js"></script>
  <!-- Parallax js -->
  <script src="../src/assets/js/plugin/jarallax.min.js"></script>
  <!-- Isotope js -->
  <script src="../src/assets/js/plugin/isotope.js"></script>
  <!-- Slick Slider Js -->
  <script src="../src/assets/js/plugin/slick.min.js"></script>
  <!-- magnific-popup v2.3.4 Js -->
  <script src="../src/assets/js/plugin/jquery.magnific-popup.min.js"></script>
  <!-- Tweenmax v2.3.4 Js -->
  <script src="../src/assets/js/plugin/tweenMax.min.js"></script>
  <!-- Nice Select Js -->
  <script src="../src/assets/js/plugin/nice-select.v1.0.min.js"></script>
  <!-- Wow js -->
  <script src="../src/assets/js/plugin/wow.v1.3.0.min.js"></script>
  <!-- Wow js -->
  <script src="../src/assets/js/plugin/jquery.countdown.min.js"></script>
  <!-- Main js -->
  <script src="../src/assets/js/main.js"></script>
  <!--==== Js Scripts End ====-->

  <!--<script src="/main.js"></script>-->
</body>

</html>

выдавало следующие ошибки

введите сюда описание изображения


Источник

Ответы (2 шт):

Автор решения: xRef

Потому что нельзя использовать родительскую директорию, если она находится вне корня сайта, иначе все сервера в мире были бы уже взломаны. Переносите main.js в корень сайта

→ Ссылка
Автор решения: Виктор Карев

Надо указывать абсолютный адрес относительно корня сайта. То есть в начале нужен слэш. Например:

<link href="/src/assets/css/plugin/slick.css">
<script src="/src/assets/js/main.js"></script>
→ Ссылка

licensed under cc by-sa 3.0 with attribution.