我的 nuxt 站点中有一个以通用模式运行的图片库(部署为静态页面),并且想向其中添加blueimp 库(一个灯箱)。
有几种方法可以放置 Javascript ( ./static
,./plugins
或./assets
)。我更喜欢使用 assets 文件夹,因为我放在那里的所有内容都由 webpack 处理(压缩,用于长期客户端缓存的唯一 ID)。
由于 blueimp 在渲染页面期间并不重要,但仅在交互期间(单击图像打开灯箱),javascript 应该在结束之前加载</body>
另一件事是,我只需要在专用页面上使用 blueimp,因此如果可能的话,不应在其他页面上提供 blueimp-gallery.min.js 和它的 css。
JS
我通过将静态文件夹中的脚本包含在 head 中并添加到其中(不使用 head ;)),让它在yarn dev
模式下运行(支持 SSR )。body: true
在生产中(作为静态页面),它不起作用。该参数ssr: false
似乎没有效果。在模板中添加<client-side>
图像组件也无济于事。
问题 1:如果您能帮我将其重写为客户端函数,我会很高兴(也许使用另一个钩子,如 created() 或 mount() ?)
<script>
export default {
head: {
script: [
{
src: 'js/blueimp-gallery/blueimp-gallery.min.js',
body: true,
ssr: false,
},
],
},
},
</script>
CSS
我可以使用下面的代码从静态文件夹加载一个 css 文件。不幸的是,这增加了一个额外的请求。
<template>
...
</template>
<script>
export default {
head: {
style: [{ src: "blueimp-gallery/css/blueimp-gallery.min.css", head: true }],
},
}
</script>
使用 @import 加载它甚至会从 assets 文件夹中获取它并将其嵌入到页面中,这很好,但它被嵌入到所有页面中。
<style>
@import '~/assets/styles/blueimp-gallery/css/blueimp-gallery.min.css';
</style>
在这里找到了另一种方式,这可能是最好的:从 NUXT 布局中的“资产”目录加载 css 文件
link: [{ rel: 'stylesheet', href: require('~/assets/blueimp-gallery/css/blueimp-gallery.min.css')}],
问题 2: 也许您有一个改进的解决方案将 CSS 嵌入到单个页面中?
我是初学者,所以如果您有解决方案,请添加一些带有一点上下文的示例。