在组件中加载node_module包时，出现窗口未定义错误

Question

我正试图在我的nuxt.js应用程序中使用pickr包(一个颜色选择器库(，在导入时它提供了一个名为窗口未定义的错误

这是代码：

<script>
import Pickr from '@simonwep/pickr/dist/pickr.min.js';
let pickr;
export default {
name: "ColorPicker",
mounted(){
pickr = Pickr.create({
el: '.test-picker',
theme: 'classic',
swatches: [
'rgba(244, 67, 54, 1)',
'rgba(233, 30, 99, 0.95)',
],

});
}
}
</script>

尝试过的方法

• 我制作了pickr包作为一个nuxt插件，并将其与mode:client一起添加到nuxt.config.js中
• 我制作了pickr包作为一个nuxt插件，并将其与ssr:false一起添加到nuxt.config.js中

但不起作用😥

Answer 1

经过努力，我想出了这种方法，并为我的做了工作

<script>
let PickrInstance;
if(process.browser){
PickrInstance = require('@simonwep/pickr/dist/pickr.min.js')
}
let  pickr;
export default {
name: "ColorPicker",
mounted(){
pickr = PickrInstance.create({
el: '.test-picker',
theme: 'classic',
swatches: [
'rgba(244, 67, 54, 1)',
'rgba(233, 30, 99, 0.95)',
],
});
}
}
</script>

Answer 2

您可以尝试将其封装在自定义Vue组件(VComponent.vue(中，并在仅限客户端的标签中呈现该组件

<client-only>
<v-component />
</client-only>
...
import VComponent from './VComponent';
export default {
components: { VComponent },
}

如果它仍然抛出错误，您可以尝试动态加载自定义组件。使用代替import VComponent from './VComponent'

const VComponent = () => import('./VComponent');