详细解释了 dist 目录的含义，它是 distribution（分发）的缩写，代表构建后的最终产物。内容涵盖前端工程、npm 组件库及 Python 打包中的 dist 应用场景。介绍了 Vite、Webpack、Vue CLI 等工具的默认配置与修改方法。讨论了是否应提交 dist 到 Git 的最佳实践，以及 Nginx 静态部署和 CDN 缓存策略。最后列举了 dist 为空、404 错误、资源路径错误及 sourcemap 泄露等常见问题及排查思路。
在很多项目里，你会反复看到一个名字：dist。它可能是一个文件夹（dist/），也可能出现在命令里（npm run build 之后生成 dist），甚至在 Python 打包发布时也会出现（dist/*.whl、dist/*.tar.gz）。这篇文章就把 dist 讲透：概念、常见场景、生成方式、配置方法、部署与最佳实践、常见坑一次说清。
dist = distribution（分发/发布）的缩写。通常表示：可以直接交付给用户、部署到服务器、发布到仓库的'最终产物'。
对比一下更直观：
src/：源代码（给开发者看的）dist/：构建后的产物（给机器部署/给用户访问的）以 Vue/React/Vite/Webpack 为例：
dist/dist/ 里通常有什么？
index.htmlassets/（hash 后的 JS/CSS/图片资源）*.js、*.css（压缩、合并、分块后的产物）sourceMap）✅ dist 可以直接丢到 Nginx/静态托管/CDN 上跑
❌ src 不行（浏览器看不懂 TS、也不认识你的模块依赖关系）
如果你写的是一个组件库/SDK，发布到 npm 时，常见做法是：
src/：TypeScript 源码dist/：编译后的 JS（CommonJS/ESM）、类型声明 .d.ts因为 npm 上的使用者并不一定能编译你的 TS，所以你通常需要发布 dist。
常见结构示例：
dist/
index.esm.js
index.cjs.js
index.d.ts
Python 项目执行打包时（例如 python -m build 或 setup.py sdist bdist_wheel），会生成：
dist/*.whl：wheel 包（推荐）dist/*.tar.gz：源码包（sdist）这些文件就是你上传到 PyPI（或私有源）的最终发布产物。
一个典型的构建流程大概是：
所以 dist 的核心特点就是：'可运行、可发布、可部署'。
dist/，可用 outDir 修改vite.config.ts：
import { defineConfig } from "vite";
export default defineConfig({
build: {
outDir: "dist", // 输出目录
assetsDir: "assets", // 静态资源目录
sourcemap: false, // 是否生成 sourcemap
},
});
构建命令：
npm run build
output.path 决定输出目录webpack.config.js：
const path = require("path");
module.exports = {
output: {
path: path.resolve(__dirname, "dist"),
filename: "js/[name].[contenthash].js",
clean: true, // 构建前清理 dist
},
};
outputDir 配置vue.config.js：
module.exports = {
outputDir: "dist",
assetsDir: "static",
};
常见输出类似：
dist/<project-name>/
答案：看场景，但大多数情况下不提交。
建议在 .gitignore 中加入：
dist/
gh-pages 分支）有的项目叫 dist/，有的叫 build/，本质都指 构建产物，区别通常是'约定俗成'：
比如：
build/dist/把 dist 上传到服务器某个目录，例如：
/usr/share/nginx/html/
SPA（单页应用）还要配 history 路由回退：
location / {
try_files $uri $uri/ /index.html;
}
dist 中的 assets 一般带 hash，非常适合 CDN 缓存：
app.8f3a1c.js（文件名带 hash）npm run buildbuild/）index.html 回退try_files 或平台的重写规则base / publicPath 配错/admin/ 下，需要配置：
base: "/admin/"
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online