126网易企业邮箱_国际军事新闻 今日 最新消息_营销策划书_惊艳的网站设计

项目中遇到的问题和找到的解决方案进行汇总清单

问题描述： create-react-app 打包项目run build 增加进度条信息。
解决方案： 使用webpack plugin — ProgressPlugin
操作: 找到scripts目录下的build.js 增加以下代码

  let compiler = webpack(config);+ compiler.apply(new webpack.ProgressPlugin({+     profile: true+}));

问题描述： create-react-app脚手架项目怎么添加proxy代理请求。
解决方案： package.json增加代理请求配置。
操作： 找到项目根目录下的package.json，增加以下代码

// 简单单个操作，请求fetch('/api/todos')，将匹配fetch('http://localhost:4000/api/todos')
"proxy": "http://localhost:4000",
// 更多的配置
"proxy": {"/api": {"target": "<url>","ws": true// ...}}

问题描述： 在使用hashRouter的情况下怎么实现类似锚点跳转
解决方案： 使用Element.scrollIntoView()
操作： 代码示例

const scrollToAnchor = (anchorName) => {if (anchorName) {// 找到锚点let anchorElement = document.getElementById(anchorName);// 如果对应id的锚点存在，就跳转到锚点if(anchorElement) {anchorElement.scrollIntoView();// 如果页面有固定header，处理顶部header遮挡title的问题const scrolledY = window.scrollY;if(scrolledY){window.scroll(0, scrolledY - 100);   // 100为header高度}}}
};