前端构建与部署：写的 .vue 是怎么变成线上网站的

一、为什么不能直接把源码扔给浏览器

现代前端工程里，浏览器"吃不进去"的东西太多了：

• TypeScript / JSX / Vue SFC：需要编译成普通 JS。
• SCSS / Less：需要编译成 CSS。
• ES Module 拆分：开发时拆成几十个文件方便维护，但浏览器一个个请求太慢，要合并。
• 新语法：用了新 JS 特性，老浏览器不认，要降级（babel）。

所以必须有一道"构建"工序，把以上全处理掉，产出浏览器能直接跑的静态文件。

二、构建到底干了啥

下图的"构建工具"那一步，干的就是这几件事：

1. 编译：TS → JS，SCSS → CSS，Vue/React 模板 → 渲染函数。
2. 打包（bundle）：把零散模块按依赖关系合并成少数几个文件。
3. Tree-shaking：摇掉没用到的代码（比如 import 了一个库却只用了其中一个函数），减小体积。
4. 压缩（minify）：变量名缩短、删空格注释，进一步瘦身。
5. 哈希命名：给产物文件加内容哈希（app.a1b2c3.js），内容变了文件名才变，方便缓存更新。

三、构建工具怎么选：Vite vs Webpack

这俩是目前最主流的，区别挺明显：

新手建议直接上 Vite。它开发时用浏览器原生 ESM 按需加载（热更新极快），构建时用 Rollup 打包，体验比老 Webpack 顺太多。老项目迁移成本高才继续用 Webpack。

一个最小的 Vite 构建命令：

npm install      # 装依赖
npm run dev      # 开发：本地起 dev server，改代码热更新
npm run build    # 构建：产出 dist/ 目录
npm run preview  # 本地预览构建产物（模拟线上）

四、产物怎么部署

npm run build 出来的 dist/ 是纯静态文件（HTML/JS/CSS/图片），不需要 Node 应用服务器，几种部署方式：

1）nginx 静态托管（最经典）

server {
    listen 80;
    server_name example.com;
    root /usr/share/nginx/html;   # 把 dist/ 内容放这
    index index.html;

    # 单页应用（SPA）必备：刷新 404 时回退到 index.html
    location / {
        try_files $uri $uri/ /index.html;
    }
}

关键那句 try_files：Vue/React 这类 SPA 是前端路由，用户直接访问 /user/1 时 nginx 找不到这个文件，会 404，回退到 index.html 让前端路由接管。漏了这步，刷新子页面就白屏。

2）对象存储静态网站托管

像华为云 OBS 的"静态网站托管"，把 dist/ 传上去配个默认首页和错误页就行，自带高可用，还能直接挂 CDN。对小项目、官网、博客特别省心，不用自己管服务器。

3）CDN 加速

静态资源丢 CDN，用户从离自己最近的节点加载，首屏快。上面说的 OBS 静态托管通常一键配 CDN。

五、开发态 vs 生产态

注意图里那条虚线分支：开发期走 dev server，不经过构建产物。dev server 用热更新（HMR），改一行立刻生效，体验好；但上线的一定是 build 出来的 dist/，那是被压缩、被优化过的真产物。

别把 dev server 当生产环境用——它没压缩、没做生产优化，性能和安全都不达标。

六、常见坑

1. SPA 刷新白屏：忘了 nginx 的 try_files 回退，子路由刷新 404。
2. 资源路径 404：base 配错，/assets/xxx.js 找不到。用相对路径或配对 publicPath/base。
3. 跨域：前端 localhost:8080 调线上接口被拦。开发用 dev server 代理，生产用网关/CORS（前面讲前后端分离时提过这种解法）。
4. 缓存不更新：没给产物加哈希，用户一直用旧 JS。开 contenthash 命名，文件变了 URL 才变。
5. 构建产物太大：没做代码分割（code splitting），首屏加载慢。按路由懒加载（import() 动态导入）。

七、小结

前端"构建与部署"的本质就三步：源码（你写的）→ 构建（翻译成浏览器能跑的静态文件）→ 部署（丢到 nginx / 对象存储 / CDN 让用户访问）。

构建解决"浏览器看不懂现代语法"的问题，部署解决"文件怎么送到用户手上"的问题。Vite 是当前最省心的构建选择，部署优先对象存储 + CDN，小项目完全不用碰应用服务器。把这条流水线跑顺，你的前端就从"本地能跑"变成"线上能用"了。