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

Question

我是 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”相同。

但是每当页面 '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错误。我该如何解决？

Answer 1

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

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

PS 混合使用 jquery 和 vue/nuxt

是个坏主意

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

Adonuxt.js my js libraries are not being called from static folder

vue.js

adonis.js

nuxt.js