跳到主要内容

这里是菜鸡小萧发布所有文章,前端入门级程序员一名,如有错误见解,欢迎批评改正,感谢观看!

Docker 场景下 Nginx 部署 Vue 项目的实践

背景 #今天在公司有点时间,想要试试前端部署的一个完整流程,当然这只是一个简单的 docker+nginx 部署流程。 前端:Vue build 后的 dist 静态文件 后端接口:运行在 172.xx.xx.xx:66xx 图片资源路径:/uploads/** 对外访问端口:不占用现有服务,选择一个不常用端口 运行环境说明 #宿主机 └── Docker └── nginx 容器 ├── 提供 Vue 静态页面 ├── 反向代理 API └── 反向代理图片资源 部署环境 #一、基础准备(Docker 环境) #1. 确认 Docker 是否安装 #docker -v 输出类似:
Nginx Docker Vue

一次 Nginx 音频 403 问题的完整排查与复盘(Docker 场景)

背景 #在今天工作时碰到了一个非常奇怪的问题: 明明后端接口正常返回了音频文件的访问链接 但在页面或播放器中请求该链接时,直接返回 403 且接口本身无任何异常日志 然后我经过同事的指导: 将 Nginx 配置修改为 user root 时,一切正常 改成普通用户(如 user user)后,音频请求立刻 403 运行环境说明 #宿主机 └── Docker └── nginx 容器 ├── nginx master(root) └── nginx worker(由 user 指令决定) 也就是说:
Nginx Docker 403错误

JavaScript 中的 Lambda 与箭头函数:概念与差异

JavaScript 中的 Lambda 与箭头函数:不只是语法糖 #初次听到 Lambda 是在上班时老板提起,当时一头雾水,后来结合同事分享和 Gemini 的解释,才逐渐弄清楚。下文是基于这些资料以及 Gemini 所整理的笔记。 参考阅读: Lambda 引发的编程语言陈年知识回顾 在日常的 JavaScript 开发中,我们经常把箭头函数(=>)直观地称为 “Lambda”。这种叫很方便,但严格来说,这两者之间存在着概念与实现上的区别。 搞清楚这一点之后,不仅能让技术交流更精确,还能更加深刻理解箭头函数的独特之处,尤其是在 this 的处理上。
JavaScript 箭头函数 Lambda

关于 Vite 做跨域代理的那些事

使用 Vite 的 Proxy / WebSocket 代理:配置 + 原理 + 源码机制 #当我们在开发 Web 应用时,我们经常遇到这样的问题: 前端代码运行在本地(如 http://localhost:5173,由 Vite dev server 提供),而后端 API 或 WebSocket 服务部署在另一个域名/端口(如 http://api.example.com,或 ws://backend:8080),而面对这种问题,我们往往需要解决跨域问题,要么就是后端设置允许跨域,要么就是在本地启动 nginx。这样都通常还是比较麻烦。但是有了 Vite 之后,只需要简单配置一下即可解决,这是非常神奇的,那么这个原理与配置是要怎么做呢?
Vue.js Vite Proxy代理

如何解决 JavaScript 大整数精度丢失问题

关于这个大精度丢失问题,一开始我还没在意,直到上班碰到了这个问题,当时记得在处理后端返回的大整数拿到一个超过 js 精度的 id 时,怎么传值都对不上,后面通过打印检查对比发现,我拿到的 id 跟我所获取到的不一致,当时还不知道是什么情况,后面上网搜索才知道这是属于一个精度丢失问题。 那原因是什么呢? 经过查询知道 JS 的 Number 类型遵循 IEEE754 标准,最大安全整数是 2^53 - 1。 再大的数字会被强制四舍五入,导致精度丢失。 那我为了避免这种情况,后续在 JSON 解析和对象处理阶段,手动把大整数转换为字符串。下面是我这边写的一个工具方法。 问题示例:精度丢失 #后端返回:
JavaScript 前端 大整数精度