Nuxtjs路由器破坏了基于Java脚本的仪表板组件

Question

我目前正在使用frest管理模板开发nuxt应用。我已经将模板内置的一些页面转换为nuxt页面组件。当我浏览页面时，某些基于javascript / jquery的组件无法正确加载（图形，实时图标）。

This应该是怎么来的。

但是this的显示方式。

这是我的nuxt.config.js文件

export default {
  mode: 'spa',
  /*
   ** Headers of the page
   */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || ''
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
    script: [
      { src: '/app-assets/vendors/js/vendors.min.js'},
      { src: '/app-assets/fonts/LivIconsEvo/js/LivIconsEvo.tools.js'},
      { src: '/app-assets/fonts/LivIconsEvo/js/LivIconsEvo.defaults.js'},
      { src: '/app-assets/fonts/LivIconsEvo/js/LivIconsEvo.min.js'},
      { src: '/app-assets/vendors/js/forms/select/select2.full.min.js'},
      { src: '/app-assets/vendors/js/ui/prism.min.js'},
      { src: '/app-assets/js/scripts/configs/vertical-menu-light.js'},
      { src: '/app-assets/js/core/app-menu.js'},
      { src: '/app-assets/js/core/app.js'},
    ]
  },
  /*
   ** Customize the progress-bar color
   */
  loading: { color: '#fff' },
  /*
   ** Global CSS
   */
  css: [
    '~/static/app-assets/vendors/css/vendors.min.css',
    '~/static/app-assets/vendors/css/ui/prism.min.css',
    '~/static/app-assets/css/bootstrap.css',
    '~/static/app-assets/css/bootstrap-extended.css',
    '~/static/app-assets/css/colors.css',
    '~/static/app-assets/css/components.css',
    '~/static/app-assets/css/themes/dark-layout.css',
    '~/static/app-assets/css/themes/semi-dark-layout.css',
    '~/static/app-assets/css/core/menu/menu-types/vertical-menu.css',
    '~/static/app-assets/css/pages/dashboard-analytics.css',
    '~/static/app-assets/css/pages/dashboard-ecommerce.css',
    '~/static/app-assets/css/pages/app-file-manager.css',
    '~/static/assets/css/style.css',
    // '~/static/app-assets/css/pages/app-email.css',
    '~/static/app-assets/vendors/css/editors/quill/quill.snow.css',


  ],
  /*
   ** Plugins to load before mounting the App
   */
  plugins: [],
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: [
  ],
  /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/auth'
  ],
  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: {
    baseURL: 'secret'
  },
  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {}
  },
  auth: {
  strategies: {
    local: {
      endpoints: {
        login: { url: 'login', method: 'post', propertyName: 'data.token' },
        user: { url: 'me', method: 'get', propertyName: 'data' },
        logout: false
      }
    }
  }
}

}

我无法真正放置我的仪表板页面组件，因为它太大了，无法放在此处（字符数限制）。但我会提出我认为可能会有所帮助的部分。

<template>
 <div>
   <!--some wrappers and components-->
   <!-- Multi Radial Chart Starts -->
              <div class="col-xl-4 col-md-6 col-12 dashboard-visit">
                <div class="card">
                  <div
                    class="card-header d-flex justify-content-between align-items-center"
                  >
                    <h4 class="card-title">Drive Space Used</h4>
                    <i
                      class="bx bx-dots-vertical-rounded font-medium-3 cursor-pointer"
                    ></i>
                  </div>
                  <div class="card-content">
                    <div class="card-body">
                      <div id="multi-radial-chart"></div>
                      <ul
                        class="list-inline d-flex justify-content-around mb-0"
                      >
                        <li>
                          <span
                            class="bullet bullet-xs bullet-primary mr-50"
                          ></span
                          >Sheets
                        </li>
                        <li>
                          <span
                            class="bullet bullet-xs bullet-danger mr-50"
                          ></span
                          >Docs
                        </li>
                        <li>
                          <span
                            class="bullet bullet-xs bullet-warning mr-50"
                          ></span
                          >Images
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
 </div>
</template>
<script>
export default {
  head: {
    bodyAttrs: {
      class:
        'vertical-layout vertical-menu-modern 2-columns  navbar-sticky fixed-footer',
      'data-open': 'click',
      'data-menu': 'vertical-menu-modern',
      'data-col': '2-columns'
    },
    script: [
      { src: '/app-assets/vendors/js/charts/apexcharts.min.js' },
      { src: '/app-assets/vendors/js/extensions/swiper.min.js' },
      { src: '/app-assets/js/scripts/pages/dashboard-ecommerce.js' },
      { src: '/app-assets/vendors/js/extensions/dragula.min.js' },
      { src: '/app-assets/js/scripts/pages/dashboard-analytics.js' }
    ]
  },
  middleware: 'auth'
}
</script>

我在这里做错了什么？干杯..

Answer 1

您需要在nuxt.config中插入Jquery插件以支持Jquery小部件或库。

尝试一下：

const webpack = require('webpack')
...
plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
    })
]

让我知道它是否不起作用。