gatsby develop一切正常显示,但是gatsby build后的HTML布局混乱、图片src路径错误、导航链接不正常,请问有人遇到吗,该怎么解决?
重现步骤
gatsby build
预期结果
实际结果
环境
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);
};