还可以做几项关键优化代码分割分包、压缩、移除 console、开启 Gzip。在项目根目录下的vite.config.js中添加配置javascript// vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue // 用于生成 Gzip 压缩文件可选 import viteCompression from vite-plugin-compression export default defineConfig({ plugins: [ vue(), // 开启 Gzip 压缩将打包后的文件生成对应的 .gz 文件 // Nginx 可以直接用这些文件减小传输体积 viteCompression({ // 压缩算法gzip algorithm: gzip, // 只压缩大于 10KB 的文件 threshold: 10240, // 保留原文件Nginx 会根据请求头返回 .gz 或原始文件 deleteOriginFile: false }) ], build: { // 最终产物输出目录默认就是 dist outDir: dist, // 开启 CSS 代码分割默认就是 true cssCodeSplit: true, // 设置 chunk 大小警告阈值默认 500KB chunkSizeWarningLimit: 1000, // terserOptions 用于配置代码压缩Vite 使用 esbuild/terser minify: terser, terserOptions: { compress: { // 打包时自动去掉所有 console.log 和 debugger drop_console: true, drop_debugger: true } }, // Rollup 配置控制代码分割和分包策略 rollupOptions: { output: { // 手动分包把第三方库单独打包避免业务代码变动导致缓存失效 manualChunks: { // 把 Vue 全家桶单独打一个包 vue-vendor: [vue, vue-router, pinia], // 把常用的 UI 库或工具库单独打一个包按实际项目调整 // element-plus: [element-plus], // axios: [axios] }, // 自定义 chunk 文件名便于缓存管理 chunkFileNames: assets/js/[name]-[hash].js, entryFileNames: assets/js/[name]-[hash].js, assetFileNames: assets/[ext]/[name]-[hash].[ext] } } } })关键解释Gzip 压缩将大文件预先压缩成.gz文件服务器直接返回压缩版减少 60%~80% 的体积。需要 Nginx 配合后面讲。分包策略把 Vue 核心库、路由、状态管理单独打包。因为你不会经常更新 Vue 版本但业务代码经常改。分开之后用户只需要重新下载变了的业务包Vue 包可以继续用缓存。去掉 console生产环境不需要调试信息减小体积同时避免泄露敏感数据。四、构建产物分析看清楚包里到底装了啥优化完配置我们得看看包体积到底怎么样了。可以安装一个可视化分析工具bashnpm install -D rollup-plugin-visualizer在vite.config.js中添加javascriptimport { visualizer } from rollup-plugin-visualizer export default defineConfig({ plugins: [ vue(), viteCompression({...}), // 打包后自动生成一个 stats.html打开就能看到各模块的体积占比图 visualizer({ open: true, // 打包后自动在浏览器中打开 gzipSize: true, // 显示 Gzip 压缩后的大小 brotliSize: true // 显示 Brotli 压缩后的大小比 Gzip 更优 }) ], // ... 其他配置 })执行npm run build打包完成后会自动打开一个网页每个方块代表一个模块越大表示占的体积越多。你可以针对最大的几个模块进行优化比如换成 CDN 引入。五、Nginx 部署让外网能访问到你的项目前端打包产物本质上就是一堆静态文件HTML、CSS、JS、图片。我们需要一个Web 服务器把这堆文件暴露出去。Nginx 是最常用的选择。5.1 安装 NginxLinux (Ubuntu/Debian)bashsudo apt update sudo apt install nginxWindows去官网下载压缩包解压后运行nginx.exe。5.2 上传 dist 文件到服务器将本地dist文件夹里的所有内容上传到服务器的某个目录比如/var/www/myapp。bash# 在服务器上创建目录 sudo mkdir -p /var/www/myapp # 把本地 dist 内的文件上传用 scp 或 FTP 工具 # scp -r ./dist/* userserver:/var/www/myapp5.3 配置 Nginx 虚拟主机在 Nginx 的配置目录通常是/etc/nginx/sites-available/下创建一个新配置文件nginx# /etc/nginx/sites-available/myapp server { # 监听的端口 listen 80; # 你的域名或服务器IP server_name yourdomain.com www.yourdomain.com; # 网站根目录指向你的 dist 文件位置 root /var/www/myapp; index index.html; # 开启 Gzip 压缩配合之前生成的 .gz 文件 gzip on; # 启用静态 Gzip如果存在同名的 .gz 文件就直接返回 gzip_static on; # 只压缩大于 1KB 的文件 gzip_min_length 1024; # 压缩级别1-9越大压缩率越高但越耗CPU gzip_comp_level 6; # 需要压缩的文件类型 gzip_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript image/svgxml; # SPA 的核心配置所有路由都指向 index.html # 因为 Vue Router 是前端路由URL 变化不会实际请求后端 # 如果直接访问 /user/list服务器上没有这个文件会返回 404 # try_files 的作用先找请求的文件找不到就返回 index.html location / { try_files $uri $uri/ /index.html; } # 静态资源的缓存策略文件名带 hash可以放心强缓存 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ { # 静态资源缓存 30 天 expires 30d; add_header Cache-Control public, immutable; } # 禁止访问隐藏文件以点开头的文件 location ~ /\. { deny all; } }配置核心解释try_files $uri $uri/ /index.html这是解决 SPA 刷新 404 的关键。无论用户访问什么路径Nginx 都返回index.html然后 Vue Router 在前端处理实际路由。gzip_static on配合 Vite 生成的.gz文件。Nginx 发现请求某个.js文件时如果存在同名的.js.gz就直接返回压缩版无需 CPU 实时压缩。静态资源强缓存文件名中的 hash 是内容指纹内容变 hash 变所以可以放心设置长期缓存加快回访速度。5.4 启用配置并重启 Nginxbash# 创建配置文件的软链接到 sites-enabled sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/ # 检查配置文件语法是否正确 sudo nginx -t # 重启 Nginx sudo systemctl restart nginx现在打开浏览器访问你的域名或服务器 IP应该能看到项目正常运行了。六、自动化部署简介加分项每次手动打包、上传、重启 Nginx 太麻烦。可以用GitHub Actions或简单的 Shell 脚本实现自动部署。6.1 简单的部署脚本本地执行创建一个deploy.shbash#!/bin/bash # 部署脚本打包、上传、重启 Nginx echo 开始打包... npm run build echo 上传文件到服务器... # 替换 user 和 server 为实际值 scp -r dist/* useryour-server:/var/www/myapp echo 重启 Nginx... ssh useryour-server sudo systemctl restart nginx echo 部署完成执行前记得给脚本权限chmod x deploy.sh然后./deploy.sh一条命令上线。6.2 GitHub Actions 自动化可选了解在项目根目录创建.github/workflows/deploy.yml每次推送代码到 main 分支时自动部署。这里给出一个简化模板yamlname: Deploy on: push: branches: [main] jobs: build-and-deploy: runs-on: ubuntu-latest steps: - uses: actions/checkoutv4 - name: Setup Node uses: actions/setup-nodev4 with: node-version: 20 - name: Install Build run: | npm ci npm run build - name: Deploy to Server uses: easingthemes/ssh-deployv4 with: SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }} REMOTE_HOST: ${{ secrets.REMOTE_HOST }} REMOTE_USER: ${{ secrets.REMOTE_USER }} TARGET: /var/www/myapp SOURCE: dist/这样你 push 代码后GitHub 会自动帮你完成打包、上传、重启。七、总结今天我们把 Vue3 项目的“最后一公里”完整走通了步骤做什么关键点环境变量区分开发/生产环境配置.env.development/.env.production打包优化分包、去console、Gzip、分析vite.config.js中配置rollupOptionsNginx部署静态文件服务 SPA路由try_files解决刷新404静态资源缓存长期缓存加速文件名hash expires 30d自动化一键部署Shell脚本或GitHub Actions按照这套流程走下来你的项目就能稳稳当当跑在服务器上并且加载速度经过优化。如果在部署中遇到具体问题欢迎评论区留言我们一起排查。下篇预告前端错误监控与用户行为追踪把线上的 bug 一网打尽记得关注不迷路