我最近在 github 页面上部署了一个 vite React 应用程序,但其中包含的大多数 js 脚本和图像(来自 adminlte 模板)无法加载。我认为问题是由我的index.html 中这些文件的路径引起的。我尝试了一些在某处看到的解决方案,即在每个路径之前包含存储库名称,但没有成功。我需要你们尽快的帮助。
这是我的index.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AssetGuard</title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
<!-- Ionicons -->
<!-- fullCalendar -->
<link rel="stylesheet" href="plugins/fullcalendar/main.css">
[enter image description here](https://i.stack.imgur.com/TFkwR.png)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Tempusdominus Bootstrap 4 -->
<link rel="stylesheet" href="plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- JQVMap -->
<link rel="stylesheet" href="plugins/jqvmap/jqvmap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="css/adminlte.min.css">
<!-- overlayScrollbars -->
<link rel="stylesheet" href="plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<!-- Daterange picker -->
<link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css">
<!-- summernote -->
<link rel="stylesheet" href="plugins/summernote/summernote-bs4.min.css">
<!-- daterange picker -->
<link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css">
<!-- iCheck for checkboxes and radio inputs -->
<link rel="stylesheet" href="plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Bootstrap Color Picker -->
<link rel="stylesheet" href="plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css">
<!-- Tempusdominus Bootstrap 4 -->
<link rel="stylesheet" href="plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
<!-- Select2 -->
<link rel="stylesheet" href="plugins/select2/css/select2.min.css">
<link rel="stylesheet" href="plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
<!-- Bootstrap4 Duallistbox -->
<link rel="stylesheet" href="plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css">
<!-- BS Stepper -->
<link rel="stylesheet" href="plugins/bs-stepper/css/bs-stepper.min.css">
<!-- dropzonejs -->
<link rel="stylesheet" href="plugins/dropzone/min/dropzone.min.css">
<link rel="stylesheet" href="plugins/jsgrid/jsgrid.min.css">
<link rel="stylesheet" href="plugins/jsgrid/jsgrid-theme.min.css">
<link rel="stylesheet" href="src/index.css">
</head>
<body id='background-image'>
<div id="root"></div>
<script type="module" src="src/main.jsx"></script>
<!-- jQuery -->
<script src="Asset-guard/plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="Asset-guard/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button)
</script>
<!-- Bootstrap 4 -->
<script src="Asset-guard/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- ChartJS -->
<script src="Asset-guard/plugins/chart.js/Chart.min.js"></script>
<!-- Sparkline -->
<script src="Asset-guard/plugins/sparklines/sparkline.js"></script>
<!-- JQVMap -->
<script src="Asset-guard/plugins/jqvmap/jquery.vmap.min.js"></script>
<script src="Asset-guard/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
<!-- jQuery Knob Chart -->
<script src="Asset-guard/plugins/jquery-knob/jquery.knob.min.js"></script>
<!-- Select2 -->
<script src="Asset-guard/plugins/select2/js/select2.full.min.js"></script>
<!-- Bootstrap4 Duallistbox -->
<script src="Asset-guard/plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js"></script>
<script src="Asset-guard/plugins/inputmask/jquery.inputmask.min.js"></script>
<!-- daterangepicker -->
<script src="Asset-guard/plugins/moment/moment.min.js"></script>
<script src="Asset-guard/plugins/daterangepicker/daterangepicker.js"></script>
<!-- bootstrap color picker -->
<script src="Asset-guard/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
<!-- Bootstrap Switch -->
<script src="Asset-guard/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<!-- BS-Stepper -->
<script src="Asset-guard/plugins/bs-stepper/js/bs-stepper.min.js"></script>
<!-- dropzonejs -->
<script src="Asset-guard/plugins/dropzone/min/dropzone.min.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="Asset-guard/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Summernote -->
<script src="Asset-guard/plugins/summernote/summernote-bs4.min.js"></script>
<!-- overlayScrollbars -->
<script src="Asset-guard/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="Asset-guard/src/scripts/calendar.js"></script>
<script src="Asset-guard/js/adminlte.js"></script>
<!-- fullCalendar 2.2.5 -->
<script src="Asset-guard/plugins/moment/moment.min.js"></script>
<script src="Asset-guard/plugins/fullcalendar/main.js"></script>
<!-- AdminLTE for demo purposes -->
<!-- <script src="../../plugins/jsgrid/demos/db.js"></script> -->
<script src="Asset-guard/plugins/jsgrid/jsgrid.min.js"></script>
<!-- <script src="js/demo.js"></script> -->
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="Asset-guard/js/pages/dashboard.js"></script>
</body>
</html>
正如我上面所写,我多次尝试更改路径,但没有成功。
正如您在文件顶部提到的 (
<!DOCTYPE html>
),该文件是 HTML
文件,而不是 JS
文件。在那里,将文件扩展名从 .js
更改为 .html
。