javascript - 只能在浏览器中运行的包在服务器端渲染中出现错误

Question

我正在使用localForage在我的 SSR Nuxt 项目中。

和我的Nuxt-Page-Component

...
<script>
import localforage from 'localforage';
export default{
    mounted(){
        localforage.getItem('something', value => {
            ...
        });
    }
}
</script>
...

因为localforage只能在浏览器中工作，因此每次尝试以服务器端渲染模式访问页面时都会出现如下错误(虽然页面可以渲染并且页面按照我想要的方式工作)

错误 找不到可用的存储方法。在node_modules/localforage/dist/localforage.js:2743:25

我尝试使用localforage作为我项目中的自定义插件，我将其配置为仅客户端插件

// nuxt.config.js
module.exports = {
    ...    
    plugins:[
        { src: '~/plugins/localforage', ssr: false }
    ],
    ...
}

// localforage.js
import localforage from 'localforage';
window.localforage = localforage;

// localforage.js (or as a Vue plugin)
import localforage from 'localforage';
import Vue from 'vue';
Vue.use({
    install(Vue){
        Vue.prototype.$localforage = localforage;
    }
});

但是我只能得到更多的错误，这次页面无法渲染。

我该如何修复这个错误，我已经用 Google 搜索过了，但没有任何帮助。

非常感谢!

(不是一个以英语为母语的人，抱歉犯了错误)

Answer 1

挂载中的延迟加载模块怎么样？

<script>
export default{
    async mounted(){
        const localforage = await import('localforage')
        localforage.getItem('something', value => {
            ...
        });
    }
}
</script>