загрузка файла css из каталога 'assets' в макете NUXT

Question

в текстовом макете (default.vue) Я хочу загрузить изображение и файл css из папки assets, изображение загружено успешно, но файл css нет, почему?

/ layouts / default.vue

<template>
<img src="~assets/photo.jpg" />
 <!-- converted to /_nuxt/assets/photo.jpg and loaded successfully -->
</template>

<script>
export default{
 head:{
  link: [  { rel: 'stylesheet', href: '~assets/style.css' }]
}
}
</sript>

, когда я просматриваю исходный код:

<link href="~assets/style.css" />

, и он не может быть загружен

, также переход к http://localhost:3000/_nuxt/assets/style.css не выполнен, но http://localhost:3000/_nuxt/assets/photo.jpg успешно обработано

примечание:

Я не хочу помещать style.css в папку «static» так, как хочузагрузить его через webpack css-loader для добавления кеширующих хэшей

Answer 1

Src изображения автоматически компилируется Vue, вы можете увидеть больше в относительный путь импорта ;Из документов:

все URL-адреса активов, такие как <img src="...">, background: url(...) и CSS @import, разрешаются как зависимости модуля.

Для пользовательского пути, кромеВ перечисленных выше случаях необходимо явно указать путь для его компиляции в виде пути к статическим ресурсам:

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