Nuxt.js 如何从静态导入 .js 文件

Question

我正在将我的 html/css/js 网站移动到 Nuxt.js 以使其从 API 自动更新。

我想保留同一个网站，所以我将我的代码分成组件，将我的 css 导入到 :

/assets/css/*

并在 nuxt.config.js

中添加了这个

css: [
    '~/assets/css/bootstrap.min.css',
    '~/assets/css/all.min.css',
    '~/assets/css/simple-line-icons.css',
    '~/assets/css/slick.css',
    '~/assets/css/animate.css',
    '~/assets/css/magnific-popup.css',
    '~/assets/css/style.css'
  ],

并且它像这样正常工作。

我尝试对 nuxt.config.js 中的 js 和脚本执行相同的操作，但它不是那样工作的。

所以我将我所有的 js 文件移动到：

/static/js/*

并在配置中添加：

scripts:[
      { src: '/js/jquery-1.12.3.min.js', body: true },
      { src: '/js/jquery.easing.min.js', body: true },
      { src: '/js/jquery.waypoints.min.js', body: true },
      { src: '/js/jquery.counterup.min.js', body: true },
      { src: '/js/popper.min.js', body: true },
      { src: '/js/bootstrap.min.js', body: true },
      { src: '/js/isotope.pkgd.min.js', body: true },
      { src: '/js/infinite-scroll.min.js', body: true },
      { src: '/js/imagesloaded.pkgd.min.js', body: true },
      { src: '/js/slick.min.js', body: true },
      { src: '/js/contact.js', body: true },
      { src: '/js/validator.js', body: true },
      { src: '/js/wow.min.js', body: true },
      { src: '/js/morphext.min.js', body: true },
      { src: '/js/parallax.min.js', body: true },
      { src: '/js/jquery.magnific-popup.min.js', body: true },
      { src: '/js/custom.js', body: true },
    ]

有人知道如何正确导入它们以及在 Nuxt.js 中使用的最佳方法吗？

谢谢

Answer 1

您可以将 scripts 节点（重命名为 script）移动到 nuxt.config.js 文件的 head 节点（主要用于外部资源，每个 key/value 在每个脚本的对象中是一个属性）或按照 https://nuxtjs.org/docs/configuration-glossary/configuration-plugins and https://nuxtjs.org/docs/directory-structure/plugins/.

使用 Nuxt 的插件

Nuxt.js 如何从静态导入 .js 文件

How to import .js files from static in Nuxt.js

javascript

css

import

vue.js

nuxt.js