我正在尝试将引导主题重构为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
我知道:
答案 0 :(得分:1)
将静态文件夹重命名为资产文件夹,并使用〜assets /您的文件路径来引用它。 https://nuxtjs.org/guide/assets/
答案 1 :(得分:0)
如果使用静态文件夹,则所有资源都在根域中可用。 请参见docs
因此您的配置都需要像这样:
{ rel: 'stylesheet', href: '/css/fancybox/jquery.fancybox.css' },
{ rel: 'stylesheet', href: '/css/bootstrap.css' },
最佳做法
但是,您应该通过将它们添加到nuxt配置中的css property中来通过nuxt编译此CSS。
css: [
'@/assets/css/fancybox/jquery.fancybox.css',
'@/assets/css/bootstrap.css'
],