使用 pug-html-loader 将数据传递给 pug（无法读取未定义的属性）答案

【问题标题】：Pass data to pug using pug-html-loader (cannot read property of undefined)使用 pug-html-loader 将数据传递给 pug（无法读取未定义的属性）
【发布时间】：2017-10-31 22:14:02
【问题描述】：

根据pug-html-loader 的自述文件，加载程序接受一个data 对象，该对象作为options 的一部分传递给模板。虽然在 pug API reference 内的 options 上不可用，但我发现的一个 grunt 插件 (grunt-contrib-pug) 以相同的方式使用 API。

我为加载器指定了以下选项：

  loader: 'pug-html-loader',
  options: {
    pretty: true,
    exports: false,
    debug: !env.production,
    compileDebug: !env.production,
    cache: config.build.useCaching,
    doctype: 'html',
    data: {
      title:    config.metadata.title,
      baseUrl:  config.build.baseUrl,
      server:   env.server,
      metadata: config.metadata
    }
  }

我想通过以下方式访问，根据this question：

title= data.title

但是，我在编译时总是遇到以下错误：

ERROR in   Error: Child compilation failed:
  Module build failed: TypeError: Cannot read property 'title' of undefined

出于调试目的，我在模板中包含了以下行：

-
  console.log(' DATA! ' + data);

结果：

DATA! undefined

我还通过声明一些乱码而不是对象（例如字符串、纯 json、数字..）来确保将数据正确传递给 pug，然后 pug 编译器会抱怨数据不在有效格式等

有人遇到同样的问题吗？

【问题讨论】：

标签： javascript node.js webpack pug webpack-html-loader

【解决方案1】：

您应该直接引用数据（即不要在字段前加上 data）

所以你应该像这样改变你的代码：

{
  loader: 'pug-html-loader',
  options: {
    data: {
      title: 'Hello World'
    }
  }
}

然后从你的 PUG 模板中引用它更新

doctype html
html
  head
    title= title

【讨论】：

你的意思是title=title 或data: { hello: 'Hello World' }