问题及解决方案汇总

@阿猫阿狗~2024-09-17 1:36

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

问题描述： create-react-app 打包项目run build 增加进度条信息。

解决方案：使用webpack plugin --- ProgressPlugin

操作: 找到scripts目录下的build.js 增加以下代码

javascript 复制代码

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

问题描述： create-react-app脚手架项目怎么添加proxy代理请求。

解决方案： package.json增加代理请求配置。

操作：找到项目根目录下的package.json，增加以下代码

javascript 复制代码

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

问题描述：在使用hashRouter的情况下怎么实现类似锚点跳转

解决方案：使用Element.scrollIntoView()

操作：代码示例

javascript 复制代码

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高度
            }
        }
    }
};