gatsby build后的HTML布局混乱,求老哥们帮帮忙

gatsby develop一切正常显示,但是gatsby build后的HTML布局混乱、图片src路径错误、导航链接不正常,请问有人遇到吗,该怎么解决?

重现步骤

gatsby build

预期结果

b

实际结果

123
发生了什么。

环境

gatsby info --clipboard

System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
  Binaries:
    Node: 10.16.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.19.1 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0
  npmPackages:
    gatsby: ^2.10.4 => 2.10.5
    gatsby-plugin-intl: ^0.2.8 => 0.2.8
    gatsby-plugin-layout: ^1.1.0 => 1.1.0
    gatsby-plugin-react-css-modules: ^2.1.0 => 2.1.0
    gatsby-plugin-sass: ^2.1.0 => 2.1.0

gatsby-node.js配置:

// gatsby-node.js 配置脚本控制构建和页面(主要控制页面的环境变量)
const replacePath = path => (path === `/` ? path.toLowerCase() : path.replace(/\/$/, ``).toLowerCase())

// Implement the Gatsby API “onCreatePage”. This is called after every page is created.
//实现Gatsby API“ onCreatePage”。这是在创建每个页面后调用。
exports.onCreatePage = ({ page, actions }) => {
  const { createPage, deletePage } = actions
  console.log(page);
  const oldPage = Object.assign({}, page);
  // 删除尾部斜杠,除非页面为/
  page.path = replacePath(page.path);
  //是否生成新页面
  let createNews = false;
  if (page.path !== oldPage.path) {                                                                                                     
    // Replace new page with old page
    deletePage(oldPage);
    createNews = true;
  }
  //根据路由设置对应的layout层
  let excludes = [/cloud/,/product$/];
  // 
  let includes = [
    {r:/index/,l:'index'},//设置首页特定样式
    {r:/solution/,l:'solution'},
    {r:/recruit/,l:'recruit'},
    {r:/product/,l:'product'},
  ];
  let eArr = excludes.filter(r => page.path.match(r));
  let obj = includes.filter(({r,l}) => page.path.match(r))[0];
  if(eArr.length) {

  }else if(obj){
    page.context.layout = obj.l;
    createNews = true;
  }
  // console.log('node-page',page);
  createNews && createPage(page);
};
阅读 1.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏