Question

在nuxt布局（default.vue）中，我想从资产文件夹中加载图像和CSS文件图像加载成功，但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放在“静态”文件夹中，因为我想通过webpack css-loader加载它以添加缓存哈希

Answer 1

图像src由Vue自动编译，您可以在relative path import上看到更多内容；从文档中：

所有资产URL，例如<img src="...">，background: url(...)和CSS @import被解析为模块依赖项。

对于上述情况以外的自定义路径，您需要明确要求将其编译为静态资产的路径：

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

在NUXT布局中从“资产”目录加载css文件

1 个答案: