服务器端渲染中浏览器错误中只能 运行 的包

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>