Refused to apply style from '' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

Question

Смотрел видеурок Laravel 9 и Vue 3 SPA интернет магазин 11. Переносим html шаблон магазина в App vue. В ней серверная часть сделана на Laravel, а клиентская на Vue. Скачал верстку клиентской части интернет магазина - HTML шаблон клиентской части интернет магазина с Курс Laravel 9 и Vue 3 SPA интернет магазин 0. Обзор html шаблона магазина и приоритеты задач в описании под видео. Скопировал содержимое файла C:\OpenServer\domains\karteecommerce\karte-fashion-multipurpose-ecommerce-html-template\index. html в файл C:\Openserver\domains\clientpart\public\index.html vue проекта clientpart (как на видео). Скопировал папку (со стилями, шрифтами и картинками) C:\OpenServer\domains\karteecommerce\karte-fashion-multipurpose-ecommerce-html-template\assets вместо C:\Openserver\domains\clientpart\src\assets.

Папка assets из директории karte-fashion-multipurpose-ecommerce-html-template имеет следующее расположение относительно файла karte-fashion-multipurpose-ecommerce-html-template\index.html

Структура проекта как видно из скриншота ниже имеет следующий вид

Изменил все пути начинающееся с assets на ../src/assets (в C:\Openserver\domains\clientpart\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>
  <!-- Favicon For This Document -->
  <link rel="shortcut icon" href="../src/assets/images/logo/favicon-32x32.png" type="image/x-icon">
  <!-- Bootstrap 5 Css -->
  <link rel="stylesheet" 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 rel="stylesheet" href="../src/assets/fonts/flaticon.css">

  <!-- Slick Slider Css -->
  <link rel="stylesheet" href="../src/assets/css/plugin/slick.css">
  <!--  Ui Tabs Css -->
  <link rel="stylesheet" href="../src/assets/css/plugin/jquery-ui.min.css">
  <!-- Magnific-popup Css -->
  <link rel="stylesheet" href="../src/assets/css/plugin/magnific-popup.css">
  <!-- Nice Select Css -->
  <link rel="stylesheet" href="../src/assets/css/plugin/nice-select.v1.0.css">
  <!-- Animate Css -->
  <link rel="stylesheet" href="../src/assets/css/plugin/animate.css">
  <!-- Style Css -->
  <link rel="stylesheet" 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 type="module" src="../src/main.js"></script>
</body>

</html>

Страница имеет следующий вид

А должна иметь вид

Файл App.vue содержит контент и все рисунки, начинающиеся c ../src/assets/images, отображены нормально, а стили, подключенные в public/index.html с помощью '../src/assets/css', не сработали.

Подскажите, как добиться подключения css файлов и тем самым правильного отображения страницы.

P. S. В видеоуроке файл index.html расположен по адресу C:\Openserver\domains\clientpart\index.html вместо C:\Openserver\domains\clientpart\public\index.html. Я не уверен, что это повлияло, но на всякий случай написал.

P.S. Привожу скриншоты инструментов разработчика (в которых видно подключение css файлов в правом нижнем углу) - так как должно быть и как есть

Прилагаю ошибки в консоле

Приведите решение для Vue. Запуск Vue приложения виден в терминалах внизу

БЛОГ НА HUSL

Refused to apply style from '' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

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