Блог

Недавно я купил тему у Themeforest (Keen) и пытаюсь включить скрипты из темы в Vue.js приложение, но эти скрипты выдают ошибки.

Я пробовал импортировать эти скрипты, используя «импорт» в шаблоне App.vue, пробовал включать скрипты через тег script в public.html , пробовал включать скрипты в main.js через document.createElement(‘скрипт’). Была проблема с jQuery, но я исправил это, установив через npm и включив в main.js , так что скрипты Bootstrap действительно работают.

Есть ошибки, которые мне выдают скрипты:

 app.bundle.js:4 Uncaught ReferenceError: KTUtil is not defined
    at app.bundle.js:4
    at app.bundle.js:66

jquery.js?1157:3850 Uncaught TypeError: Cannot read property 'initMediumChart' of undefined
    at mediumCharts (dashboard.js:11)
    at Object.init (dashboard.js:952)
    at HTMLDocument.<anonymous> (dashboard.js:972)
    at mightThrow (jquery.js?1157:3557)
    at process (jquery.js?1157:3625)

fullcalendar.bundle.js:1327 Uncaught TypeError: Cannot read property 'fn' of undefined
    at Object.<anonymous> (fullcalendar.bundle.js:1327)
    at __webpack_require__ (fullcalendar.bundle.js:35)
    at Object.<anonymous> (fullcalendar.bundle.js:4820)
    at __webpack_require__ (fullcalendar.bundle.js:35)
    at Object.<anonymous> (fullcalendar.bundle.js:2045)
    at __webpack_require__ (fullcalendar.bundle.js:35)
    at Object.<anonymous> (fullcalendar.bundle.js:14373)
    at __webpack_require__ (fullcalendar.bundle.js:35)
    at fullcalendar.bundle.js:78
    at fullcalendar.bundle.js:81

Uncaught ReferenceError: PerfectScrollbar is not defined
    at init (scripts.bundle.js:1448)
    at Object.scrollInit (scripts.bundle.js:1462)
    at HTMLDivElement.<anonymous> (scripts.bundle.js:1600)
    at Function.each (jquery.js?1157:367)
    at jQuery.fn.init.each (jquery.js?1157:202)
    at initScroll (scripts.bundle.js:1598)
    at Object.initComponents (scripts.bundle.js:1659)
    at Object.init (scripts.bundle.js:1655)
    at HTMLDocument.<anonymous> (scripts.bundle.js:1820)
    at mightThrow (jquery.js?1157:3557)
 

main.js:

 import Vue from 'vue'
import VueFeather from 'vue-feather'
import App from './App.vue'
import router from './router'
import BootstrapVue from 'bootstrap-vue'

Vue.config.productionTip = true

Vue.use(VueFeather)
Vue.use(BootstrapVue)

var WebFont = require('webfontloader');

WebFont.load({
  google: {
    "families": [
      "Poppins:300,400,500,600,700"]
  },
  active: function () {
    sessionStorage.fonts = true;
  }
});

const jquery = require('jquery')
window.$ = window.jQuery = jquery

var vendors = document.createElement('script');
vendors.setAttribute('src', './assets/vendors/base/vendors.bundle.js');
vendors.setAttribute('type', 'text/javascript');
document.head.appendChild(vendors);

var scripts = document.createElement('script');
scripts.setAttribute('src', './assets/demo/demo4/base/scripts.bundle.js');
vendors.setAttribute('type', 'text/javascript');
document.head.appendChild(scripts);

var calendar = document.createElement('script');
calendar.setAttribute('src', './assets/vendors/custom/fullcalendar/fullcalendar.bundle.js');
vendors.setAttribute('type', 'text/javascript');
document.head.appendChild(calendar);

var dashboard = document.createElement('script');
dashboard.setAttribute('src', './assets/app/custom/general/dashboard.js');
vendors.setAttribute('type', 'text/javascript');
document.head.appendChild(dashboard);

var bundle = document.createElement('script');
bundle.setAttribute('src', './assets/app/bundle/app.bundle.js');
vendors.setAttribute('type', 'text/javascript');
document.head.appendChild(bundle);

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
 

Приложение.vue:

 <template>
  <div>
    <!-- begin::Page loader -->
    <!-- end::Page Loader -->
    <!-- begin:: Page -->
    <!-- begin:: Header Mobile -->
    <div id="kt_header_mobile" class="kt-header-mobile " >
        <div class="kt-header-mobile__logo">
            <a href="index.html">
                <img alt="Logo" src="./assets/media/logos/logo-5.png"/>
            </a>
        </div>
        <div class="kt-header-mobile__toolbar">
            <button class="kt-header-mobile__toolbar-toggler" id="kt_header_mobile_toggler"><span></span></button>
            <button class="kt-header-mobile__toolbar-topbar-toggler" id="kt_header_mobile_topbar_toggler"><i class="flaticon-more-1"></i></button>
        </div>
    </div>
    <!-- end:: Header Mobile -->
    <div class="kt-grid kt-grid--hor kt-grid--root">
      <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--ver kt-page">
        <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor kt-wrapper " id="kt_wrapper">
          <Header/>
          <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--ver kt-grid--stretch">
            <div class="kt-container kt-body kt-grid kt-grid--ver" id="kt_body">
              <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor">
                <Subheader/>
                <div class="kt-content kt-grid__item kt-grid__item--fluid">
                  <router-view/>
                </div>
              </div>
            </div>
          </div>
          <Footer/>
          <OffcanvasPanel/>
          <Quickpanel/>
          <Scrolltop/>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="sass">

</style>

<script>
import "./assets/vendors/custom/fullcalendar/fullcalendar.bundle.css"
import "./assets/vendors/base/vendors.bundle.css"
import "./assets/demo/demo4/base/style.bundle.css"

import Header from './components/Temp/Header.vue'
import Subheader from './components/Temp/Subheader.vue'
import Footer from './components/Temp/Footer.vue'
import OffcanvasPanel from './components/Temp/OffcanvasPanel.vue'
import Quickpanel from './components/Temp/Quickpanel.vue'
import Scrolltop from './components/Temp/Scrolltop.vue'

export default {
  name: "App",
  components: {
    Header,
    Subheader,
    Footer,
    OffcanvasPanel,
    Quickpanel,
    Scrolltop
  }
}
</script>
 

Я ожидаю, что все скрипты работают и выглядят как эта демонстрация: https://keenthemes.com/keen/preview/demo4/index.html

Но на самом деле работают только jQuery и Bootstrap. На мой взгляд, это как-то поправимо, но я не знаю как.

Меня спрашивают о Vue.js форум, они сказали, что мне нужно попробовать вставить скрипты перед инициализацией Vue, я попробовал вставить скрипт в раздел head, ошибки исчезли, но в функциональности никаких различий. Но я «волшебным образом» исправил эти ошибки: я вставил тег scripts после закрытия тега body, и он работает. Итак, если у кого-то есть похожие ошибки, попробуйте вставить скрипты после закрытия тега body.