问题及解决方案汇总

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

问题描述: 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高度
            }
        }
    }
};
相关推荐
m0_748230943 分钟前
Redis 通用命令
前端·redis·bootstrap
ObjectX前端实验室2 小时前
个人网站开发记录-引流公众号 & 谷歌分析 & 谷歌广告 & GTM
前端·程序员·开源
CL_IN2 小时前
企业数据集成:实现高效调拨出库自动化
java·前端·自动化
浪九天3 小时前
Vue 不同大版本与 Node.js 版本匹配的详细参数
前端·vue.js·node.js
qianmoQ4 小时前
第五章:工程化实践 - 第三节 - Tailwind CSS 大型项目最佳实践
前端·css
椰果uu4 小时前
前端八股万文总结——JS+ES6
前端·javascript·es6
微wx笑4 小时前
chrome扩展程序如何实现国际化
前端·chrome
~废弃回忆 �༄4 小时前
CSS中伪类选择器
前端·javascript·css·css中伪类选择器
CUIYD_19894 小时前
Chrome 浏览器(版本号49之后)‌解决跨域问题
前端·chrome
IT、木易5 小时前
跟着AI学vue第五章
前端·javascript·vue.js