从前端代码到线上环境部署的完整流程与避坑指南

先看效果，再看代码

最近刚上线了一个项目，前端部署这块折腾得够呛。如果你也在用Vite做项目开发，那我强烈建议你试试下面这套配置方法，亲测有效。

先上个最简化的配置代码：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: process.env.NODE_ENV === 'production' ? '/my-project/' : '/',
  build: {
    outDir: 'dist',
    assetsDir: 'static',
    rollupOptions: {
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
      }
    }
  }
})

这个配置看起来简单，但背后其实有很多坑要踩。下面我就来详细说说。

这个场景最好用

当你需要把前端项目部署到子路径时，比如 https://example.com/my-project/，这个配置就特别好用。重点在于base字段的设置，生产环境自动加上/my-project/前缀。

还有个很实用的地方是静态资源的组织方式。通过rollupOptions的设置，所有的JS文件都会输出到static/js/目录下，图片等资源会按类型分类存放，看着清爽多了。

踩坑提醒：这三点一定注意

第一个坑就是路由问题。如果你用的是Vue Router的history模式，必须记得在服务器端添加rewrite规则。像这样：

location /my-project/ {
  try_files $uri $uri/ /my-project/index.html;
}

第二个坑是环境变量的使用。有次我直接在代码里写死了API地址，结果测试环境和生产环境来回切换的时候差点崩溃。正确的做法是这样：

const API_URL = import.meta.env.VITE_APP_API_BASE || 'https://jztheme.com/api'

然后在.env文件里定义不同环境的变量：

# .env.production
VITE_APP_API_BASE=https://api.jztheme.com

# .env.development
VITE_APP_API_BASE=http://localhost:3000

一些进阶技巧分享

最近发现了个提升部署效率的小技巧。可以在package.json里加几个脚本：

{
  "scripts": {
    "build:test": "cross-env NODE_ENV=production vite build",
    "build:prod": "cross-env NODE_ENV=production vite build && npm run deploy",
    "deploy": "scp -r dist/* user@server:/var/www/html/my-project"
  }
}

这样每次部署只要执行npm run build:prod就能自动完成打包和上传。不过这里要注意，Linux服务器要提前配置好SSH密钥，不然每次都输密码会很烦。

最后再说点细节

关于缓存问题，很多人容易忽视。我的做法是在nginx配置里加上这些：

location ~* .(?:ico|css|js|gif|jpe?g|png)$ {
  expires 7d;
  add_header Cache-Control "public";
}

另外提一嘴CDN加速。如果项目访问量大，可以考虑把静态资源托管到CDN上。只需要改一下vite.config.js里的base：

base: process.env.NODE_ENV === 'production' 
  ? 'https://cdn.jztheme.com/my-project/' 
  : '/'

总结一下

以上是我个人对前端部署的一些经验总结，特别是Vite项目的部署方案。从基础配置到自动化部署，再到性能优化，基本都涵盖了。当然这个技术的拓展用法还有很多，比如Docker容器化部署、CI/CD集成等等，后续我会继续分享这类博客。

如果你有更好的实践经验，欢迎在评论区交流。毕竟前端部署这块水挺深的，大家一起探讨才能进步。