当我在 github 页面上上传我的 React 应用程序(vite)时,javascript 资源无法加载

问题描述 投票:0回答:1

我最近在 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>

正如我上面所写,我多次尝试更改路径,但没有成功。

reactjs github-pages vite adminlte
1个回答
0
投票

正如您在文件顶部提到的 (

<!DOCTYPE html>
),该文件是
HTML
文件,而不是
JS
文件。在那里,将文件扩展名从
.js
更改为
.html

© www.soinside.com 2019 - 2024. All rights reserved.