企业官网建设流程全解析

“构建”和“部署”是程序员最常听到的两个词，但其实很多人最初都会混淆。

1、总结

• 构建（Build）：把你写的“源代码”加工成能运行的“成品”。
• 部署（Deploy）：把这个“成品”放到服务器或应用环境中，让别人能访问或使用。

2、举个生活例子

你可以把整个过程想象成：

👨‍🍳 你写代码 → 就像在厨房做饭。

3、举个 React / Vue 项目例子

你本地的代码：

src/├── App.vue ├── main.js ├── components/└── assets/

这些是开发用源码，浏览器或服务器是不能直接识别这些文件的。

当你执行：

npm run build

构建工具（如 webpack、vite、react-scripts）会做：

把 .vue / .jsx / .ts 等源文件 编译成纯 JavaScript

压缩代码、去掉注释

把图片、字体、样式合并成最少文件

输出到一个 dist 或 build 文件夹：

dist/├── index.html ├── assets/└── js/

这就是“构建结果”，它是一套真正可以运行在浏览器上的文件。

然后是“部署”

部署就是：

把上面构建出来的 dist/ 文件夹上传到服务器，让别人能访问。

举例：

构建 & 部署的关系图

开发(src/)↓ 构建(npm run build)↓ 生成 dist/↓ 部署(上传到服务器/发布)↓ 用户访问项目网址

4、小结对比表