大杂烩——前端开发遇到的问题

1. 图片地址+?d 下载图片配置，请求头中加下面
   Content-Disposition: attachment; filename="Image.png"

2. docker镜像启动和停止
   docker run -d -p 3000:8000 harbor.gemii.cc/lizhospital/ui-luzhen-platform-web:v1.0.0
   docker ps // 查看所有正在运行容器
   docker stop containerId // containerId 是容器的ID
   docker ps -a // 查看所有容器
   docker ps -a -q // 查看所有容器ID
   docker start (docker ps -a -q) // stop停止所有容器
   docker rm $(docker ps -a -q) // remove删除所有容器
   docker system prune --volumes // 清除缓存

3. react项目报错:process is not defined on hot reload

• npm 依赖包安装版本问题，删掉node_modules文件夹，重新安装
• 升级 react-scripts
  参考文档：https://stackoverflow.com/questions/70357360/process-is-not-defined-on-hot-reload

4. 软件盘弹起时会压缩窗口高度，解决办法：设置最小高度。

5. 微信网页reload()刷新失败，解决办法： 使用location.href+随机数。

6. Max-height 导致 calc失效？

7. 元素没有设置宽高，导致viewport失效。

8. Android和iOS软键盘弹起时窗口高度不一样，Android会减少，ios则不变。

9. iOS下input 设置为disable时，字体颜色会有一个透明度。

10. 图片缓存问题，使用react-avatar-editor 组件时遇到，不想从缓存加载图片，在图片链接后面加随机数

11. Android的窗口高度比ios的窗口高度少1，滚动加载时需要注意。

12. Vim 保存只读文件的修改指令：:w !sudo tee %

13. 「Text Autosizer」，又称「Font Boosting」、「Font Inflation」,给元素指定宽高，就可以避免 Font Boosting 被触发。

14. -webkit-box-orient: vertical;打包时丢失。设置/* autoprefixer: off / -webkit-box-orient: vertical; / autoprefixer: on */

15. process.env.PUBLIC_URL react中使用来写组件中的图片路径

16. 页面性能提升：

    • Css整理去除无用的css样式
    • 图片优化，精灵图体积减小
    • eslint语法检查？
    • 使用code-split => react-loadable
    • 内存优化？？？ 去掉console.log() 去掉定义了但是没有使用的变量
    • 使用shouldComponentUpdate 减少不必要的渲染

17. iPhone自带click点击效果用css去除: 给可点击的元素设置： -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

18. transform 会导致元素字体模糊

19. pnpm 在windows下执行报错：

pnpm : 无法加载文件 C:\Program Files\nodejs\pnpm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/? 
LinkID=135170 中的 about_Execution_Policies。

解决办法：

1、在系统中按下Win + R，输入 Windos PowerShell
2、点击“管理员身份运行”
3、输入“ set-ExecutionPolicy RemoteSigned”回车
4、根据提示，输入y，回车