在 nuxt 中暴露静态资源答案

【问题标题】：Expose static assets in nuxt在 nuxt 中暴露静态资源
【发布时间】：2019-05-25 01:08:35
【问题描述】：

我正在尝试将引导主题重构为 nuxt 项目。我想从静态文件夹中提供静态文件，如下所示：

在我的 nuxt.config 文件中，我有：

head: {
title: pkg.name,
meta: [
  { charset: 'utf-8' },
  { name: 'viewport', content: 'width=device-width, initial-scale=1' },
  { hid: 'description', name: 'description', content: pkg.description },
],
link: [
  { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
  { rel: 'stylesheet',  href: '/static/css/fancybox/jquery.fancybox.css' },
  { rel: 'stylesheet',  href: '/static/css/bootstrap.css' },
  { rel: 'stylesheet',  href: '/css/bootstrap-theme.css' },
  { rel: 'stylesheet',  href: '/css/slippry.css' },
  { rel: 'stylesheet',  href: '/static/css/style.css' },
  { rel: 'stylesheet',  href: '/static/color/default.css' },
],
script:[{'src': 'static/js/modernizr.custom.js' }]

但是在我的开发工具中我看到：

我已阅读 https://nuxtjs.org/guide/assets/，但仍不清楚如何使这些资产可用

我怎样才能让它工作？

编辑：按照你的指示，我现在有了：

head: {
title: pkg.name,
meta: [
  { charset: 'utf-8' },
  { name: 'viewport', content: 'width=device-width, initial-scale=1' },
  { hid: 'description', name: 'description', content: pkg.description },
],
link: [
  { rel: 'icon', type: 'image/x-icon', href: '~assets/favicon.ico' },
  { rel: 'stylesheet',  href: '~assets/css/fancybox/jquery.fancybox.css' },
  { rel: 'stylesheet',  href: '~assets/css/bootstrap.css' },
  { rel: 'stylesheet',  href: '~assets/css/bootstrap-theme.css' },
  { rel: 'stylesheet',  href: '~assets/css/slippry.css' },
  { rel: 'stylesheet',  href: '~assets/css/style.css' },
  { rel: 'stylesheet',  href: '~assets/color/default.css' },
],
script:[{'src': '~assets/js/modernizr.custom.js' }]

 },

我的目录结构：

但是当我尝试时：

$npm run dev

我明白了：

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案1】：

如果您使用静态文件夹，则所有资产都在根域中可用。请参阅docs

所以你的配置都需要是这样的：

  { rel: 'stylesheet',  href: '/css/fancybox/jquery.fancybox.css' },
  { rel: 'stylesheet',  href: '/css/bootstrap.css' },

最佳实践

但是，您应该通过 nuxt 编译此 css，只需将它们添加到 nuxt 配置中的 css property 即可。

  css: [
   '@/assets/css/fancybox/jquery.fancybox.css',
   '@/assets/css/bootstrap.css'
  ],

【讨论】：

【解决方案2】：

将静态文件夹重命名为 assets 文件夹并使用 ~assets/path-to-your-file 来引用它。 https://nuxtjs.org/guide/assets/

【讨论】：