前端开发遇到的一些问题----持续更新

页面上两个标签（非块样式）之间有一个小边距，怎么改样式都去除不了放两个标签同一条线上就可以解决，还有一个好的办法就是用flex。点击app有后台解决方法：全局添加样式-webkit-tap-highlight-color:rgba(255,255,255,0);解决手机端input边框阴影：添加-webkit-appearance:none；在chrome模拟器中点击元素错位解决办法：我把百分比改成fittowindow，还可以来回切换几次模型。gitpush错误RPC失败；curl55SSLWrite()returnederror-9805解决方法：一次提交的代码过多，使用gitlog查找最近一次commit的代码，gitreset{id}返回到commit之前的状态，然后分批提交。代码丢失，git日志找不到解决办法：gitreset--hardxxxrecords,usegitreflog。sudonginx-sreloadstartsnginxerror:nginx:[error]open()"/usr/local/var/run/nginx.pid"failed(2:Nosuchfileordirectory)解决方法：sudonginx-c/usr/local/etc/nginx/nginx.conf=>sudonginx-sreloadinputwhenthetypeisnumbermaxlengthinvalid解决办法：inputtype="tel"微信授权回调有多个参数，可能会丢失。解决方法：因为授权界面中&的多个参数会成为整个界面地址的参数，所以需要对&进行加密，使用varcallbackurl=encodeURIComponent(window.location.href)进行加密滚动不流畅。解决方法：添加style-webkit-overflow-scrolling:touch;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;事件冒泡解决方法：stopPropagation,cancelBubble(ie)移入移出多个触发器解决方法：mouseleave对子元素不起作用会生效，不冒泡会安装navicat，完成后会提示文件损坏。解决方法：打开终端，输入sudospctl--master-disabledocsify配置的搜索功能无效。解决方法：回到文档首页（文档根目录），打开控制面板，找到localstorage，删除docsify.search.index和docsify.search.expires，刷新页面。当textarea中输入的换行符和空格直接存放在想要样式的div中时，是没有效果的。解决方法：转义，将空格换行\r\n换成
，模板中用{{{}}}代替{{}}解析。nl2br:function(str,idx,tag,isXhtml){letblankTag=''letbreakTag=(isXhtml||typeofisXhtml==='undefined')?'
':'
'让newStr=(str+'').replace(/([^>\s]?)(\s)/g,'$1'+blankTag+'$2')newStr=(newStr+'').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g,'$1'+breakTag+'$2')if(tag){this.changeData[idx][tag]=newStr}returnnewStr}也可以直接加上样式white-space:pre-wrap;html2canvas绘制的图片模糊：只要把html整体加倍，图片加倍，可以用html2canvas解决将html页面保存为图片时，图片不完整：先记录下当前的scrollTop值，window.scrollTo(0,0)到顶部，然后绘制图片，然后回到原来的滚动位置。gitpullcodeerror:Permissiondenied(publickey)解决办法：j.sshgitconfig--globaluser.name"***"gitconfig--globaluser.email"***@163.com"ssh-keygen-trsa-C"***@163.com"copy:id_rsa.pub到https://git.oschina.net/keys的ssh中点击事件失败解决方法：使用csspointer-events:none;直接穿透当前的div，类似于微信。向左滑动显示当前li的部分操作掩码。Touchmove在手机上失败。解决方法：在touchmove中使用一个阈值，Math.abs(endY-startY)是否大于10，来判断是否preventDefault。webpack打包时，NoESLintconfigurationfound解决：项目中缺少.eslintrc.js文件，在根目录下手动添加。七牛图片上传、下载文件名改名解决方法：普通a标签下载，在末尾加上download="1223"即可。在七牛上，在href链接后面加上“?download/name”。newvue报错errorDonotuse'new'forsideeffects解决方法：在错误内容上面添加/eslint-disableno-new/h5获取地理位置信息，用户第一次拒绝，用户拒绝信息以后总是会弹出。解决方法：android，设置-》应用程序管理-》Internet（内置或安装其他浏览器）-》权限-》位置信息（重启此开关）新js代码经常报错importdeclarationsnotsupportbycurrentjavascriptversion解决方法：webstorm="perference="languages&frameworks="javascript="右侧选择ecmascript6android微信播放视频，播放结束后，关闭后视频一直在最前面，z-index无效。解决方法：网上很多地方都没有找到答案。官网说没有解决办法，我走了个小弯路。关闭视频时，保存当前视频，然后找到父级，删除视频，给父级innerHTML视频。问题大致解决了。目前我只想到这么一个方法。letthisNode=thisletparentNode=thisNode.parentNodeparentNode.removeChild(this)parentNode.innerHTML=thisNode.outerHTML调试chrome浏览器时，连接手机后chrome://inspect是空白所以出现了翻墙的问题。翻墙后就可以查看dom了。mysql连接错误：ERROR1045(28000):Accessdeniedforuser'root'@'localhost'(usingpassword:YES)解决方法：系统偏好设置-》底部mysql-》回车-》点击初始化数据库-》输入密码，然后求解时还要输入这个密码。mysql连接池报错：客户端不支持服务器请求的认证协议；考虑升级MySQL客户端解决方案：navicatnewqueryinput:ALTERUSER'root'@'localhost'IDENTIFIEDWITHmysql_native_passwordBY'yourpassword'提取的header，点击打开遮罩层。滚动时，底部会跟随滚动。解决方法：监听遮罩层的状态，将body的位置改为fixed。此时每次关闭遮罩层，页面回到顶部，因为fixed不在文档流中，所以要先记录当前位置，位置设置为static再定位到原来的位置。代码如下：status(status){if(status==='open'){this.scrollY=window.scrollY}document.body.style.position=status==='close'?'static':'fixed'window.scrollTo(0,this.scrollY)}如果mask层只有一页，不需要滚动，就禁用touchmove@touchmove.prevent即可，不需要太多操作.对于不同的产品页面，id发生变化，但产品保持不变。解决方法：监听$route变化，然后获取id重新取数据。swiper插件轮播循环时，上面添加的点击事件失败。解决方法：click事件没有绑定到swiper-slide上，而是添加到on上。原因是在循环过程中，swiper复制了好几份swiper-slide，却没有复制它的事件，所以事件时而生效，时而失败。其实swiper-slide在第一个的时候，右滑页面，让它滚动到最后一个，然后点击就会失败。newSwiper('.first-block',{loop:true,paginationClickable:true,parallax:true,setWrapperSize:true,on:{click:function(){//当前活动块的索引，与activeIndex,循环模式下，不统计复制块数constrealIndex=this.realIndexvm.handleJumpe(vm.indexSwiperList[realIndex].href,{})}}})火狐浏览器，锚链接失效。解决方案：问题的原因是iframe。锚链接放在iframe中，iframe+href在Firefox中不兼容。解决方法是判断是否是火狐浏览器。如果有，计算锚点id和top的距离，然后滚动到id位置。fixed+inputfocus导致fixed失效，搜索框随页面滚动。解决方案：网上查到的解决方案大多分为上中下三部分，使用绝对定位。因为懒得改结构，所以找了一个简单的解决办法。touchmove时，input自动失去焦点。handleTouchMove(){//我指的是搜索子组件this.$children[1].$refs.searchInput.blur()}sourcetree远程拉取代码everyEachupdate需要输入密码解决：打开终端，到对应代码位置，输入gitconfig--globalcredential.helperstore，然后提交一次代码，输入用户名和密码，以后就不用再重新了-进入。charles的ssl证书一直安装不上。解决方法：手机和电脑在同一个wifi环境下，关闭手机代理重新打开手机代理，安装成功后在safari中输入chls.pro/ssl并添加信任注意：如果代理成功，可以输入network="Advanced="关闭代理手机代理，应该先打开charles，再用手机连接。启动项目，访问时报错invalidhostheader。解决方法：在package.jsonwebpack.dev.conf.js的scripts命令中添加--disableHostCheck=true"dev":"webpack-dev-server--disableHostCheck=true--inline--progress--configbuild/"，配置好的vue项目，本地开发环境可以热加载自动更新，使用charles代理后不会更新。解决方案：webpack-dev-server--disableHostCheck=truehttps://segmentfault.com/q/10...vue单页路由丑陋#解决方案：添加模式：'history'exporttorouter/index.jsdefaultnewRouter({mode:'history',...})在钉钉h5小程序中，调用钉钉页面，然后返回自己的页面数据，不更新。解决方法：使用setTimeout在页面跳转前加一个dingToast，在回调中再次调用该接口。如下：setTimeout(()=>{//device.notification.toastdingToast({msg:''}).then(()=>{this.fetchInfo()})},1000)consturl=`https://h5.dingtalk.com/xxx`//biz.util.openLinkdingOpenLink({url})h5微应用后退按钮router.back()偶尔失效解决：虽然浏览器没有给出url数据在栈，它给出栈中历史记录的长度显示。当发现按钮无效时，长度不正确。针对这一发现，对当前页面进行特殊处理。router.back()失效后，直接关闭当前页面。项目中正则表达式eslint验证失败解决：在上面添加一行//eslint-disable-next-lineno-useless-escapevue.esm.js?c5de:628[Vuewarn]:Youmayhaveaninfinite组件渲染函数中的更新循环。解决方法：项目中使用了v-for。我在写静态页面的时候，是为了显示列表，直接在html页面上使用{{list=[1,2,3]}}造成的。只需将其删除。问题原因是v-for的list在多处同时被修改。newDate('1994-01-0100:00:00')或者newDate('1994-1-1')在PC上没问题，在手机上报错。解决方案：更改为新日期（'1994/01/0100:00:00'）或新日期（'1994/01/01'）。开发微信公众号时，只能有1-2个回调域名。解决方法：做一个公共页面，将这个页面设置为回调域名。该页面的作用是：接收重定向地址并将授权后得到的代码添加到链接中，然后重定向到我们需要跳转的页面。支付宝授权成功后，会跳转回原页面。这个时候支付宝里面的回调页面还是打开的，但是没有关闭。解决方法：在支付宝中使用window.AlipayJSBridge.call('closeWebview')关闭页面。同理，微信中的页面关闭后使用window.WeixinJSBridge.call('closeWindow')vscode打开后，系统cpu爆了，电脑无法工作。解决方法：vscode=”Code=”Preferences=”设置输入框输入search.followSymlinks，去掉勾选。vetur+prettier格式化的时候，vue的模板没有格式化。解决办法：先删除多个工作区，然后个人设置："editor.defaultFormatter":"vscode.html-language-features"工作区："editor.defaultFormatter":"esbenp.prettier-vscode"。webpack打包太慢，怎么检测。解决方法：使用webpack-bundle-analyzer插件，通过以下四步检查：安装：npmintallwebpack-bundle-analyzer--save-dev，在webpack.prod.conf.js中添加：constBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPluginwebpackConfig.plugins.push(newBundleAnalyzerPlugin())在package.json中添加“analyz”：“exportNODE_ENV=production&&npm_config_report=true&&npmrunbuild”，运行npmrun后分析浏览器将打开分析结果页面。npminstall下载慢的解决办法：把npm换成淘宝镜像。?~npmconfigsetregistryhttps://registry.npm.taobao.org查看?~npmconfiggetregistrygetaddrinfoENOTFOUND解决办法：修改hosts文件cd/etc=>vimhosts修改后：wq.提交代码的时候，所有的代码都加了，在gitignore中也没有忽略，但是总是少提交一个文件解决：gitadd-f强制代码提交的时候加所有文件，报错报错，无法提交index.lock解决：rm-f。git/index.lock查看视频或音频等元素的内部结构解决方法：打开console="settings="preferences="showuseragentshadowDOM.mac下查看.hiddenfiles解决方法：查看，hidden为YEStoNOcd~defaultswritecom.apple.FinderAppleShowAllFilesYESkillallFindernpmERR!codeELIFECYCLE解决方法：node_modules发生意外变化，导致依赖库不完整。Step1:npmcacheclean--forceStep2:rm-rfnode_modulesStep3:rm-rfpackage-lock.jsonStep4:npminstallnpminstall成功后，再次启动npmstart，获取文件夹下所有文件名解决方法：constrequireModule=require.context('../assets/img',false,/\.png$/)作为anyexportconstIMAGE_LIST:any=requireModule.keys()||[]移动h5页面兼容刘海和底栏解决方案：添加内页样式使用overflow:auto;-webkit-溢出滚动：触摸；在forEach中使用asyncawait无效的解决方法：使用for循环解决解构赋值注意null，会覆盖默认的[]constb={a:null};const{a=[]}=b,此时a!==[]为null解决方法：默认值需要注意js读取本地文件解决方法：require.contextconstrequireModule=require.context('../assets/img',false,/\.png|gif|jpg|svg$/)exportconstIMAGE_LIST=requireModule.keys()||[]