Question

最近，我从Themeforest（Keen）购买了主题，并试图在Vue.js应用程序中包含该主题的脚本，但是这些脚本会引发错误。

我尝试使用App.vue模板中的“导入”导入这些脚本，尝试通过 public.html 中的脚本标签包含脚本，尝试通过文档将main.js中的脚本包含在内.createElement（'script'）。 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')

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起作用。在我看来，它可以修复，但是我不知道如何。

Answer 1

我在Vue.js论坛上被问到，他们说我需要在Vue初始化之前尝试插入脚本，我尝试在 head 部分插入脚本，错误消失了，但是功能上没有区别。但是我“神奇地”修复了该错误：我在关闭body标签后插入了 scripts标签，它可以正常工作。因此，如果有人遇到类似的错误，请尝试在关闭body标签后插入脚本。

如何在Vue.js中正确包含购买的主题中的脚本

1 个答案: