只能在浏览器中运行的程序包在服务器端呈现错误

Question

我在SSR Nuxt项目中使用localForage。

以及我的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>