如何在Pug模板中访问JSON数据？附相关代码示例

我来帮你搞定这个问题！你目前的问题主要出在HtmlWebpackPlugin的数据传递路径和Pug模板的变量访问方式上，下面是具体的修复方案：

1. 修正Webpack配置的数据传递 #

你现在通过data字段传递JSON数据，但HtmlWebpackPlugin的自定义配置项会被挂载到htmlWebpackPlugin.options对象下，建议直接把pages数据放到插件配置的根节点，这样访问更直接：

new HtmlWebpackPlugin({
  filename: 'catalog.html',
  chunks: ['main'],
  template: PATHS.source + '/views/pages/catalog.pug',
  inject: true,
  // 直接将pages数据挂载到插件配置中
  pages: require('./dev/util/options.json').pages
})

2. 修正Pug模板的变量访问路径 #

在Pug模板里，你需要通过htmlWebpackPlugin.options来访问自定义的配置数据，而不是直接用htmlWebpackPlugin.pages。修改你的布局代码：

title #{htmlWebpackPlugin.options.pages[page].title}

3. 确保Pug页面的变量正确生效 #

确认你的Pug布局文件中已经声明了block vars，这样页面里定义的page变量才能被布局文件读取到：

布局文件（比如layout.pug）：

doctype html
html
  head
    block vars // 确保这个block存在
    title #{htmlWebpackPlugin.options.pages[page].title}
  body
    block content

页面文件（catalog.pug）：

extends ../layouts/layout.pug

block vars
  - var page = "catalog"

block content
  // 页面内容

为什么之前的写法不行？ #

• HtmlWebpackPlugin会把你在配置中添加的所有自定义属性（除了它内置的那些，比如filename、template等）都放到htmlWebpackPlugin.options对象里，所以你之前直接写htmlWebpackPlugin.pages是找不到数据的。
• 必须确保页面里的page变量通过block vars传递到布局中，否则布局文件无法识别page这个变量。

内容的提问来源于stack exchange，提问作者cygnus