如何用nuxt加载本地JS文件

Question

我的文件夹 /assets/js 中有多个脚本。 我将它们添加到 nuxt.config.js 中，如下所示：

script: [
  { src: 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' },
  { src: '~assets/js/bootstrap.min.js' },
  { src: '~assets/js/retina-1.1.0.js' },
  { src: '~assets/js/jquery.hoverdir.js' },
  { src: '~assets/js/jquery.hoverex.min.js' },
  { src: '~assets/js/jquery.prettyPhoto.js' },
  { src: '~assets/js/jquery.isotope.min.js' },
  { src: '~assets/js/custom.js' }
],

第一个没有问题，但本地文件没有加载。 我试过 ： '@/assets'、'/assets'、'js/'、'~/assets' 等，但没有任何效果。

我总是收到此错误：

GET http://localhost:3000/~assets/js/custom.js net::ERR_ABORTED

那么我该如何加载我的文件呢？ 谢谢你

Answer 1

尝试将JS文件放在assets目录的根目录下。否则，您需要创建一个静态目录。 我希望这有帮助。

在你的

nuxt.config.js

head: {
    link: [{
        rel: 'icon',
        type: 'image/x-icon',
        href: '/favicon.png'
    }],
    script: [
        {
            type: 'text/javascript',
            src: 'js/jquery.min.js',
            body: true
        },
        {
            type: 'text/javascript',
            src: 'js/script.js',
            body: true
        }
    ]
}

Answer 2

你的js文件必须位于静态路径文件夹中，并将此代码添加到你的*.vue文件中才能使用

export default {
    head() {
    return {
      link: [
        {
          rel: "stylesheet",
          href:
            "/assets/css/style.css"
        },
      ],

      script: [
        {
          src: "assets/js/style.js",
          body: true
        },],}
      }

Answer 3

使用 Nuxt 3，我必须在 "public/assets/" 文件夹中添加 Js 文件。像这样：

• 公共/资产/js/文件名1.js
• 公共/资产/js/file-name2.js

在 nuxt.config.ts:

app: {
  head: {
     script: [  
         { tagPosition: 'bodyClose', src: 'assets/js/file-name1.js' },
         { tagPosition: 'bodyClose', defer: "true", src: 'assets/js/file-name2.js' },
     ]
  }
}

Answer 4

<template>
  <img src="~/assets/your_image.png" />
</template>

或

background: url('~assets/banner.svg');

或

<img :src="require(`~/assets/img/${image}.jpg`)" />

https://nuxtjs.org/docs/2.x/directory-struct/assets/

注：

您的 CSS 文件中的 ~/ 别名将无法正确解析。您必须在 url CSS 引用中使用 ~assets（不带斜杠），即背景： url("~assets/banner.svg")