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'相同。

但是，只要加载了页面的“供应商”或“零售”页面中的任何一个，所有的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库没有从静态文件夹中调用

1 个答案: