javascript - 在 nuxt 中公开静态资源

标签 javascript vue.js nuxt.js

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

enter image description here

在我的 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' }]

},

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

enter image description here

我已阅读 https://nuxtjs.org/guide/assets/但我仍然不清楚如何使这些 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' }]

 },

我的目录结构:

enter image description here

但是当我尝试时:

$npm run dev

我明白了:

enter image description here

最佳答案

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

关于javascript - 在 nuxt 中公开静态资源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53937668/

相关文章:

javascript - react 钩子(Hook) : Why do several useState setters in an async function cause several rerenders?

javascript - 使用 Jest 的快照测试内部函数

javascript - 如何隐藏/取消隐藏 vuejs 中特定组件的路由器链接按钮

authentication - Nuxt auth SSR cookie 仅在关闭浏览器和加载页面时出现问题

vue.js - 为什么需要 graphql-tag 才能将 Apollo 与 Nuxt 结合使用?

javascript - 在 jquery 中使用变量,javascript 正则表达式

javascript - 如何将美国日期格式转换为欧洲日期格式

vue.js - 如何从网址中删除主题标签?

javascript - 如何解决axios post请求问题

less - 如何在 Nuxt.js 中为 LESS 启用内联 JavaScript?