Question

我正在使用引导程序模板，正在尝试将其实施到Nuxt项目中。我相信我已经加载了除脚本之外的所有必需文件。

我正在将脚本导入<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/mainLayout" android:background="@color/colorMain" xmlns:app="http://schemas.android.com/apk/res-auto" tools:context=".MainActivity"> <FrameLayout android:id="@+id/frag_container" android:clipToPadding="true" android:layout_alignParentStart="true" android:layout_alignParentEnd="true" android:layout_below="@id/toolbar_top" android:layout_above="@id/bottom_navigation" android:layout_width="match_parent" android:layout_height="match_parent" /> <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_above="@id/bottom_navigation" app:rippleColor="@color/colorPrimary" android:clickable="true" android:layout_margin="18dp" android:tint="@color/colorMain" app:srcCompat="@drawable/ic_plus" /> <androidx.appcompat.widget.Toolbar app:layout_constraintTop_toTopOf="parent" android:id="@+id/toolbar_top" android:layout_height="wrap_content" android:layout_width="match_parent" android:minHeight="?attr/actionBarSize" android:elevation="1dp" android:background="@color/colorMain"> <ImageButton android:id="@+id/accountButton" android:layout_gravity="start" android:tint="@color/colorSecondary" android:background="?attr/selectableItemBackgroundBorderless" app:srcCompat="@drawable/ic_account" android:layout_width="36dp" android:layout_height="36dp" android:layout_marginStart="16dp" android:layout_marginEnd="16dp" android:contentDescription="@string/account" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/app_title" android:textColor="@color/colorSecondary" android:fontFamily="@font/productsansmedium" android:textSize="20sp" android:layout_gravity="center" android:id="@+id/toolbar_title" /> </androidx.appcompat.widget.Toolbar> <com.google.android.material.bottomnavigation.BottomNavigationView android:theme="@style/Widget.BottomNavigationView" android:background="@color/bottomNavColor" app:itemIconTint="@drawable/navbar_color_selector" app:itemTextColor="@drawable/navbar_color_selector" app:elevation="20dp" android:id="@+id/bottom_navigation" android:layout_alignParentStart="true" android:layout_alignParentBottom="true" android:layout_width="match_parent" android:layout_height="wrap_content" app:menu="@menu/bottom_nav_items" /> </RelativeLayout>。我尝试了几种不同的方法：

1。）我尝试过包括这样的本地src路径：

nuxt.config.js

2。）并作为静态文件：

script: [
    { src: '~assets/js/jquery.js' },
    { src: '~assets/js/popper.min.js' },
    { src: '~assets/js/bootstrap.min.js' },
    { src: '~assets/js/jquery.cubeportfolio.min.js' },
    { src: '~assets/js/parallax.min.js' },
    { src: '~assets/js/jquery.appear.min.js' },
    { src: '~assets/js/jquery.themepunch.tools.min.js' },
    { src: '~assets/js/jquery.themepunch.revolution.min.js' },
    { src: '~assets/js/extensions/revolution.extension.actions.min.js' },
    { src: '~assets/js/extensions/revolution.extension.carousel.min.js' },
    { src: '~assets/js/extensions/revolution.extension.kenburn.min.js' },
    { src: '~assets/js/extensions/revolution.extension.layeranimation.min.js' },
    { src: '~assets/js/extensions/revolution.extension.migration.min.js' },
    { src: '~assets/js/extensions/revolution.extension.parallax.min.js' },
    { src: '~assets/js/extensions/revolution.extension.slideanims.min.js' },
    { src: '~assets/js/extensions/revolution.extension.video.min.js' },
    { src: '~assets/js/revolution-addons/before-after-affect/revolution.addon.beforeafter.min.js'}
  ],

我的整个script: [ { src: '/js/jquery.js' }, { src: '/js/popper.min.js' }, { src: '/js/bootstrap.min.js' }, { src: '/js/jquery.cubeportfolio.min.js' }, { src: '/js/parallax.min.js' }, { src: '/js/jquery.appear.min.js' }, { src: '/js/jquery.themepunch.tools.min.js' }, { src: '/js/jquery.themepunch.revolution.min.js' }, { src: '/js/extensions/revolution.extension.actions.min.js' }, { src: '/js/extensions/revolution.extension.carousel.min.js' }, { src: '/js/extensions/revolution.extension.kenburn.min.js' }, { src: '/js/extensions/revolution.extension.layeranimation.min.js' }, { src: '/js/extensions/revolution.extension.migration.min.js' }, { src: '/js/extensions/revolution.extension.parallax.min.js' }, { src: '/js/extensions/revolution.extension.slideanims.min.js' }, { src: '/js/extensions/revolution.extension.video.min.js' }, { src: '/js/revolution-addons/before-after-affect/revolution.addon.beforeafter.min.js'} ],文件如下所示：

nuxt.config.js

检查页面时，我没有看到列出的任何脚本文件，这似乎阻止了该引导程序主题的其余部分正确加载。

它应该看起来像这样： http://www.themesindustry.com/html/treely/index.html

我的整个仓库可以在这里找到： https://github.com/SIeep/brandon-evans-portfolio

非常感谢任何指导或帮助！

谢谢：）

Answer 1

我认为scripts数组应位于head对象内部，如下所示：

export default {
  ...
  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: '~assets/js/jquery.js' },
    { src: '~assets/js/popper.min.js' },
    { src: '~assets/js/bootstrap.min.js' },
    { src: '~assets/js/jquery.cubeportfolio.min.js' },
    { src: '~assets/js/parallax.min.js' },
    { src: '~assets/js/jquery.appear.min.js' },
    { src: '~assets/js/jquery.themepunch.tools.min.js' },
    { src: '~assets/js/jquery.themepunch.revolution.min.js' },
    { src: '~assets/js/extensions/revolution.extension.actions.min.js' },
    { src: '~assets/js/extensions/revolution.extension.carousel.min.js' },
    { src: '~assets/js/extensions/revolution.extension.kenburn.min.js' },
    { src: '~assets/js/extensions/revolution.extension.layeranimation.min.js' },
    { src: '~assets/js/extensions/revolution.extension.migration.min.js' },
    { src: '~assets/js/extensions/revolution.extension.parallax.min.js' },
    { src: '~assets/js/extensions/revolution.extension.slideanims.min.js' },
    { src: '~assets/js/extensions/revolution.extension.video.min.js' },
    { src: '~assets/js/revolution-addons/before-after-affect/revolution.addon.beforeafter.min.js'}
  ],
  ...
}

Answer 2

您应该使用import语句和webpack而不是导入所有这些js文件。这不是一个好习惯。

此外，我不确定nuxt是否存在属性script。但是，如果您确实想这样做，则可以将文件导入head内容中，例如以下示例：

export default {
  mode: 'universal',
  /*
  ** 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' }
      { rel: 'stylesheet', href: '/assets/css/jquery.fancybox.min.css' }
    ],
    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'}
    ]
  },

未在Nuxt项目中加载JS文件

2 个答案: