Question

这是名为adminDashBoard的页面

<template>

    <div>

        <AdminTopHeader></AdminTopHeader>
        <AdminSideBar></AdminSideBar>
        <div id="page-wrapper">
            <CreateAdmin></CreateAdmin>
            
        </div>
    </div>
    
</template>

<script>
import AdminTopHeader from '../layoutComponents/adminTopHeader';
import AdminSideBar from '../layoutComponents/adminSideBar';
import CreateAdmin from '../adminComponents/createAdmin';

    export default {
        name: "adminDashBoard",
        components: {
            AdminTopHeader,
            AdminSideBar,
            CreateAdmin,
            
        }
    }
</script>

<style scoped>

</style>

然后我的索引html包含了所有需要的css和js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="favicon.ico">
    <title>client2020i</title>

    <link href="/public/assets/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/public/assets/plugins/bower_components/bootstrap-extension/css/bootstrap-extension.css" rel="stylesheet">
    <!-- Menu CSS -->
    <link href="/public/assets/plugins/bower_components/sidebar-nav/dist/sidebar-nav.min.css" rel="stylesheet">
    <!-- toast CSS -->
    <link href="/public/assets/plugins/bower_components/toast-master/css/jquery.toast.css" rel="stylesheet">
    <!-- morris CSS -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
   
    <!-- animation CSS -->
    <link href="/public/assets/css/animate.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="/public/assets/css/style.css" rel="stylesheet">
    <!-- color CSS -->
    <link href="/public/assets/css/colors/default-dark.css" id="theme" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

    <style>
        a { cursor: pointer; }
    </style>
    
</head>
<body>
    <noscript>
      <strong>We're sorry but client2020i doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
    </div>
            <!-- built files will be auto injected -->
    <!-- jQuery -->

   <script src="/public/assets/plugins/bower_components/jquery/dist/jquery.min.js"></script>
   <!-- Bootstrap Core JavaScript -->
   <script src="/public/assets/bootstrap/dist/js/tether.min.js"></script>
   <script src="/public/assets/bootstrap/dist/js/bootstrap.min.js"></script>
   <script src="/public/assets/plugins/bower_components/bootstrap-extension/js/bootstrap-extension.min.js"></script>
   <!-- Menu Plugin JavaScript -->
   <script src="/public/assets/plugins/bower_components/sidebar-nav/dist/sidebar-nav.min.js"></script>
   <!--slimscroll JavaScript -->
   <script src="/public/assets/js/jquery.slimscroll.js"></script>
   <!--Wave Effects -->
   <!-- <script src="./assets/js/waves.js"></script> -->
   <!--Counter js -->
   <script src="/public/assets/plugins/bower_components/waypoints/lib/jquery.waypoints.js"></script>
   <script src="/public/assets/plugins/bower_components/counterup/jquery.counterup.min.js"></script>
   <!--Morris JavaScript -->
   <!-- <script src="./assets/plugins/bower_components/raphael/raphael-min.js"></script> -->
   <!-- <script src="./assets/plugins/bower_components/morrisjs/morris.js"></script> -->
   <!-- Custom Theme JavaScript -->
   <script src="/public/assets/js/custom.min.js"></script>
   <!-- <script src="./assets/js/dashboard1.js"></script> -->
   <!-- Sparkline chart JavaScript -->
   <!-- <script src="./assets/plugins/bower_components/jquery-sparkline/jquery.sparkline.min.js"></script> -->
   <!-- <script src="./assets/plugins/bower_components/jquery-sparkline/jquery.charts-sparkline.js"></script> -->
   <script src="/public/assets/plugins/bower_components/toast-master/js/jquery.toast.js"></script>
   <!--Style Switcher -->
   <script src="/public/assets/plugins/bower_components/styleswitcher/jQuery.style.switcher.js"></script>
  </body>
</html>

每当您访问adminDashBoard页面时，除非刷新页面，否则它不会加载所有需要的CSS。我已经在控制台中检查了我的网络，登录后进入页面后，它并没有提取任何所需的资产。我是Vue的新用户，对不起任何错误

import Vue from 'vue';
import VeeValidate from 'vee-validate';

import { store } from './_store';
import { router } from './_helpers';
import App from './app/App';

Vue.use(VeeValidate);


new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App)
});

Javascript和CSS无法在新页面上加载Vue JS

0 个答案: