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目录的根目录中..否则你需要创建静态目录..希望它的帮助

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

<base href="/xyz/">

或

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

或

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

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

注意：

~/ 别名不会在您的 CSS 文件中正确解析。您必须在 url CSS 引用中使用 ~assets（不带斜线），即 background: url("~assets/banner.svg")

如何使用nuxt加载本地JS文件

3 个答案: