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

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

这就是它应该如何来

但事实就是如此

这是我的nuxt.config.js文件

导出默认值{
模式：“spa”，
/*
**页眉
*/
负责人：{
标题：process.env.npm_包|u名称| |“”，
元：[
{charset:'utf-8'}，
{name:'viewport'，content:'width=设备宽度，初始比例=1'}，
{
hid：“描述”，
名称：'说明'，
内容：process.env.npm_包|u说明||”
}
],
链接：[{rel:'icon'，键入：'image/x-icon'，href:'/favicon.ico'}]，
脚本：[
{src:'/app-assets/vendors/js/vendors.min.js'}，
{src:'/app assets/font/LivIconsEvo/js/LivIconsEvo.tools.js'}，
{src:'/app assets/font/LivIconsEvo/js/LivIconsEvo.defaults.js'}，
{src:'/app assets/font/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'}，
]
},
/*
**自定义进度条颜色
*/
加载：{color:'#fff'}，
/*
**全局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”，
],
/*
**安装应用程序之前要加载的插件
*/
插件：[]，
/*
**Nuxt.js开发模块
*/
构建模块：[
],
/*
**Nuxt.js模块
*/
模块：[
//文件：https://axios.nuxtjs.org/usage
“@nuxtjs/axios”，
“@nuxtjs/auth”
],
/*
**Axios模块配置
**看https://axios.nuxtjs.org/options
*/
axios：{
baseURL:“机密”
},
/*
**构建配置
*/
建造：{
/*
**您可以在此处扩展网页包配置
*/
扩展（配置，ctx）{}
},
认证：{
战略：{
本地：{
端点：{
登录：{url:'login'，方法：'post'，属性名称：'data.token'}，
用户：{url:'me'，方法：'get'，属性名称：'data'}，
注销：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>

使用的驱动器空间


希茨


文件


图像


导出默认值{
负责人：{
bodyAttrs：{
类别：
'垂直布局垂直菜单现代2列导航栏粘性固定页脚'，
“数据打开”：“单击”，
“数据菜单”：“现代垂直菜单”，
“数据列”：“2列”
},
脚本：[
{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'}
]
},
中间件：“auth”
}

我做错了什么？

---

干杯。

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

试试这个：

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

---

如果不起作用，请告诉我。

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

试试这个：

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

---

如果不起作用，请告诉我。

控制台中有错误吗？@Ifaruki控制台是干净的。控制台中有错误吗？@Ifaruki控制台是干净的。