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

【问题标题】：loading a css file from 'assets' directory in a NUXT layout从 NUXT 布局中的“资产”目录加载 css 文件
【发布时间】：2019-05-12 20:24:31
【问题描述】：

在 nuxt 布局（default.vue）中，我想从 assets 文件夹加载图像和 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 加载它以添加缓存哈希

【问题讨论】：

标签： node.js vue.js vuejs2 nuxt.js

【解决方案1】：

图片src是Vue自动编译的，更多可以在relative path import查看；来自文档：

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

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

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

【讨论】：