0

我的项目在开发模式下运行正常，但在构建模式下失败。完整的错误是

ReferenceError: window is not defined
at Object.<anonymous> (node_modules/vue-js-modal/dist/index.js:1:210)
at __webpack_require__ (webpack/bootstrap:25:0)
at Module.<anonymous> (assets/js/app.a0a1f9b3.js:5157:12)
at __webpack_require__ (webpack/bootstrap:25:0)
at Object.<anonymous> (assets/js/app.a0a1f9b3.js:2785:18)
at __webpack_require__ (webpack/bootstrap:25:0)
at assets/js/app.a0a1f9b3.js:118:18
at Object.<anonymous> (assets/js/app.a0a1f9b3.js:121:10)
at o (/home/nestor/progs/gridsome_blog/node_modules/vue-server-renderer/build.prod.js:1:77545)
at /home/nestor/progs/gridsome_blog/node_modules/vue-server-renderer/build.prod.js:1:78138

给我的唯一线索是模态插件。我读过这是因为客户端渲染，但不明白在这种情况下如何修复它。在main.js我导入并设置插件时：

import VModal from 'vue-js-modal'
// other things
Vue.use(VModal, { dynamic: true , dynamicDefaults: { clickToClose: true }, injectModalsContainer: true})

我在vue文件中将它用作动态模式，因此当单击按钮时，模式是由导出字典中定义的方法创建的：

export default {
     // other things
     methods:{ show_modal(title_,company_,url_,text_){
          this.$modal.show({
            template: `
            <div id="modal_div" style="padding: 0px; overflow: auto;">
              <h4 id="#modal_title" style="margin:15px;">{{title}}</h4>
              <a target="_blank" :href="url"> <h5 id="#modal_subtitle" style="margin:15px;">{{company}}</h5></a>
              <p id="#modal_text" style="margin:15px;font-family:Muli;text-align:justify">{{text}}</p>
            </div>
              `,
              props: ['title','company','url','text']
            }, {
              title: title_,
              company: 'With: ' + company_,
              url: url_,
              text: text_
            }, {
              height: 'auto',
              adaptive: true,
              draggable: true
            }, {
              'before-close': (event) => { console.log('modal closed'); }
            })
    }
}

我是 Vue 的新手，任何帮助将不胜感激。

4

1 回答 1

1

你是对的，这是因为SSRwindow -在构建期间没有。一种方法是在模板中使用标签并在导出<ClientOnly>中制作所有这些内容。mounted()

在这种特殊情况下，您很幸运：您的组件有一个插件。Gridsome 插件库包含许多 vue 组件的包装器，因此您可以更轻松地使用它们。

于 2020-02-13T11:34:08.660 回答