vue打包实现推送
Vue 项目打包及自动化推送部署方案
本地打包与静态资源生成
执行 npm run build 或 yarn build 命令生成 dist 目录，包含优化后的静态文件。检查 vue.config.js 中的 publicPath 配置，确保资源路径正确。
// vue.config.js 示例配置
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/your-sub-path/' : '/'
}自动化部署脚本配置
创建 deploy.sh 脚本实现构建后自动推送到服务器，需预先配置服务器SSH访问权限：
#!/bin/sh
npm run build
scp -r dist/* user@server_ip:/path/to/target_folder
echo "Deployment completed"CI/CD 流水线集成
在 .gitlab-ci.yml 或 .github/workflows/deploy.yml 中配置自动化流程。GitHub Actions 示例：
name: Deploy
on: [push]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- run: npm install && npm run build
- uses: easingthemes/ssh-deploy@main
with:
SSH_PRIVATE_KEY: ${{ secrets.SSH_KEY }}
REMOTE_HOST: your.server.com
REMOTE_USER: root
SOURCE: "dist/"
TARGET: "/var/www/html"服务器端接收配置
Nginx 服务器需配置静态资源访问规则，示例配置：
server {
listen 80;
server_name yourdomain.com;
root /var/www/html/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}版本控制与回滚方案
使用 rsync 保留历史版本，或通过Docker镜像管理版本。结合Git Tag实现版本标记：
git tag v1.0.0
git push origin --tags注意事项
- 确保生产环境关闭Vue开发者工具和调试模式
- 检查路由的history模式是否配置了服务器端支持
- 跨域问题需通过代理或CORS策略解决
- 敏感信息应通过环境变量管理，避免硬编码
