Adonuxt.js 我的 js 库没有从静态文件夹中调用答案

【问题标题】：Adonuxt.js my js libraries are not being called from static folderAdonuxt.js 我的 js 库没有从静态文件夹中调用
【发布时间】：2019-04-24 09:16:55
【问题描述】：

我是 Nuxt.js 的新手，通过开发一个试点项目来学习，其中在两条不同的路线中，我包含了两个不同的演示模板。

为此，我需要包含不同的 js 库和 css！

这是我如何将其包含到nuxt.js 文件中的！

link: [

      // vendor 
      {
        rel: 'stylesheet',
        href: '/vendor/css/bootstrap.min.css'
      },

      {
        rel: 'stylesheet',
        href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css'
      },
      {
        rel: 'stylesheet',
        href: 'https://use.fontawesome.com/releases/v5.1.0/css/all.css'
      },
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Slabo+27px'
      },
      {
        rel: 'stylesheet',
        href: '/vendor/css/bootstrap.min.css'
      },
      {
        rel: 'stylesheet',
        href: '/vendor/css/owl.carousel.min.css'
      },
      {
        rel: 'stylesheet',
        href: '/vendor/css/owl.theme.default.min.css'
      },
      {
        rel: 'stylesheet',
        href: '/vendor/css/style.css'
      },


      // retail 
      {
        rel: 'stylesheet',
        href: '/retail/css/bootstrap.min.css'
      },
      {
        rel: 'stylesheet',
        href: '/retail/style.css'
      },
      {
        rel: 'stylesheet',
        href: '//fonts.googleapis.com/css?family=Lato:400,700%7CMontserrat:300,400,600,700'
      },
      {
        rel: 'stylesheet',
        href: '/retail/icons/fontawesome/css/fontawesome-all.min.css'
      },{
        rel: 'stylesheet',
        href: '/retail/icons/Iconsmind__Ultimate_Pack/Line%20icons/styles.min.css'
      },
    ],

    script:[

      // vendor
      { src: 'vendor/js/jquery-3.3.1.slim.min.js', body: true },
      { src: 'vendor/js/popper.min.js', body: true },
      { src: 'vendor/js/bootstrap.min.js', body: true },
      { src: 'vendor/js/owl.carousel.min.js', body: true },
      { src: 'vendor/js/custom.js', body: true },
      { src: 'vendor/js/custom-vendor.js', body: true },
      { src: 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', body: true },


      // retail

      { src: 'retail/js/libs/jquery-3.3.1.min.js', body: true },
      { src: 'retail/js/libs/popper.min.js', body: true },
      { src: 'retail/js/libs/bootstrap.min.js', body: true },
      { src: 'retail/js/navigation.js', body: true },
      { src: 'retail/js/jquery.flexslider-min.js', body: true },
      { src: 'retail/js/jquery-asRange.min.js', body: true },
      { src: 'retail/js/circle-progress.min.js', body: true },
      { src: 'retail/js/afterglow.min.js', body: true },
      { src: 'retail/js/script.js', body: true },
      { src: 'retail/js/script-dashboard.js', body: true }
]

这是我的目录页面结构：


├── pages
|   ├── retail
|       └── bank.vue
|       └── index.vue
|       └── info.vue
|   ├── vendor
|       └── index.vue
|   ├── index.vue

这是我的静态文件夹的目录结构，其中包含了我所有的 js 库和 css 文件：

├── static
|   ├── retail
|       └── css
            ....
|       └── icons
            ....
|       └── images
            ....
|       └── js
|           └── jquery-3.2.1.slim.min.js
                ....
|       └── style.css
|
|   ├── vendor
|       └── css
            ....
|       └── images
            ....
|       └── js
|           └── jquery-3.3.1.slim.min.js
                ....
|       └── style.css
            ....

因此，我希望转到“/vendor”并加载供应商的东西，并且与“/retail”相同。

但每当页面“供应商”或“零售”页面加载任何一个页面时，所有 javascript 库都会在以下路径中调用：

Request URL: http://localhost:3000/vendor/vendor/js/jquery-3.3.1.slim.min.js

应该在哪里调用它 Request URL: http://localhost:3000/vendor/js/jquery-3.3.1.slim.min.js 不是/vendor/vendor/...

因此它会产生404 Not Found 错误。我该如何解决？

【问题讨论】：

标签： vue.js nuxt.js adonis.js

【解决方案1】：

你应该在你的 src 标签中使用绝对路径。例如

  { src: '/vendor/js/jquery-3.3.1.slim.min.js', body: true },

PS 混合 jquery 和 vue/nuxt 是个坏主意

【讨论】：