2-5 打包与部署

代码写好,怎么上线?这一章讲打包产物长什么样、怎么部署到服务器(对后端同学来说,这块很好理解)。

---

1. 打包:npm run build

npm run build

Vite 会把所有 .vue、JS、CSS 编译、压缩、打包,输出到一个 dist/ 目录:

dist/
├── index.html
└── assets/
    ├── index-a1b2c3.js     ← 打包压缩后的 JS(带 hash)
    └── index-d4e5f6.css    ← 打包压缩后的 CSS

dist/ 里全是静态文件(HTML/JS/CSS/图片),没有 Node 运行时——这点很关键:

前端打包产物 = 一堆静态文件。部署 = 把这堆文件丢到任何能提供静态文件的服务器上(Nginx、对象存储、CDN、甚至后端的 static 目录)。不需要在服务器上装 Node(Node 只是打包时用)。

本地预览打包结果:

npm run preview

---

2. 部署方式

方式 A:Nginx(最常见)

把 dist/ 传到服务器,Nginx 配置指向它:

server {
  listen 80;
  server_name your-domain.com;
  root /var/www/your-app/dist;   # 指向 dist 目录
  index index.html;

  # 关键:SPA 路由要把所有路径都回退到 index.html
  location / {
    try_files $uri $uri/ /index.html;
  }

  # 接口转发给后端(生产环境的反向代理)
  location /api/ {
    proxy_pass http://127.0.0.1:8080/;
  }
}

try_files ... /index.html 这行很重要:SPA 只有一个 HTML,用户直接访问 /users/5 时,Nginx 找不到该文件会 404;这行让它回退到 index.html,再由前端路由接管显示正确页面。不配这行,刷新非首页会 404,是新手常踩的坑。

方式 B:放进后端项目(后端同学的舒适区)

把 dist/ 里的文件拷到后端的静态资源目录(如 Spring Boot 的 src/main/resources/static/),随后端一起部署。一样要处理「SPA 路由回退到 index.html」(后端加个 fallback 转发)。

方式 C:静态托管 / 对象存储

OSS、COS、S3、Vercel、Netlify、GitHub Pages 等,直接传 dist/ 即可,适合纯前端项目。

---

3. 部署路径与 base 配置

如果不是部署在域名根目录,而是子路径(如 https://x.com/admin/),要在 vite.config.js 设 base:

export default defineConfig({
  base: '/admin/',   // 资源引用前缀,默认 '/'
  plugins: [vue()],
})

否则打包后引用的 JS/CSS 路径会错(404)。

---

4. 环境变量(区分开发/生产接口地址)

不同环境用不同后端地址,Vite 用 .env 文件:

# .env.development(开发)
VITE_API_BASE=/api

# .env.production(生产)
VITE_API_BASE=https://api.yourdomain.com

代码里读取(必须以 VITE_ 开头才会暴露给前端):

const baseURL = import.meta.env.VITE_API_BASE

npm run dev 用 development,npm run build 用 production,自动切换。

后端类比:像 application-dev.yml / application-prod.yml 的多环境配置。

---

5. 完整上线流程回顾

# 1. 本地开发
npm run dev

# 2. 开发完,打包
npm run build       # 产出 dist/

# 3. 本地验证打包结果
npm run preview

# 4. 把 dist/ 部署到 Nginx / 后端 static / 对象存储
#    并确保:SPA 路由回退 + 接口反向代理配好

---

动手练习(用 vue-demo)

1. 在项目目录跑 npm run build,看生成的 dist/ 目录结构。
2. 跑 npm run preview,用它给的地址打开,确认打包版能正常跑。
3. 思考题(无需真部署):如果把这个 dist 放到你们后端的静态目录,你需要在后端/Nginx 额外做哪一件事,才能保证用户刷新 /about 不会 404?(答案:把未匹配的路径 fallback 到 index.html)

---

小结

• npm run build → dist/(纯静态文件,服务器无需 Node)。
• 部署 = 把 dist/ 丢到 Nginx / 后端 static / 对象存储。
• SPA 必做:服务器把未知路径回退到 index.html(否则刷新非首页 404)。
• 子路径部署设 base;多环境用 VITE_ 开头的环境变量。

🎉 第 2 部分完成!你已经能用公司里真实的方式(Vite + 路由 + Pinia + axios)开发并部署一个 SPA。 ➡️ 接下来 第 3 部分:H5 移动端专项,把这些用到真正的手机页面上。