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

Question

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

我尝试在 App.vue 模板中使用 "import" 导入这些脚本，尝试通过 public.html 中的脚本标签包含脚本，尝试过包括 main.js 到 document.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 部分，错误消失了，但在功能上没有区别。但是我 "magically" 修复了这个错误：我在关闭 body 标签后插入了 scripts 标签，它起作用了。所以，如果有人有类似的错误，请尝试在关闭body标签后插入脚本。

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

How to properly include scripts from bought theme in Vue.js

javascript

vuejs2

vue-cli-3