无法构建 Gridsome 项目：模态导致 'window is not defined' 错误

Question

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

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 新手，如有任何帮助，我们将不胜感激。

Answer 1

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

在这种特殊情况下，您很幸运：您的组件有一个 plugin。 Gridsome 插件库包含很多vue 组件的包装器，所以你可以更容易地使用它们。

无法构建 Gridsome 项目：模态导致 'window is not defined' 错误

Cannot build Gridsome project: modal causes 'window is not defined' error

vue.js

vue-component

gridsome