走啊走
加油

alibaba cloud linux 3.2104 lts vue项目部署？

2025-05-04 03:36:00 分类：阿里云ECS
服务器价格表

Alibaba Cloud Linux 3.2104 LTS 部署 Vue 项目的完整指南

结论

在 Alibaba Cloud Linux 3.2104 LTS 上部署 Vue 项目，核心步骤包括环境配置（Node.js/Nginx）、项目构建和 Nginx X_X部署。以下是详细操作流程。

1. 环境准备

1.1 安装 Node.js（运行 Vue 项目必需）

  • 推荐使用 Node.js 16+ 或 18+ LTS 版本：

    # 添加 NodeSource 仓库（示例为 Node.js 18.x）
curl -fsSL https://rpm.nodesource.com/setup_18.x | bash -

# 安装 Node.js
yum install -y nodejs

# 验证安装
node -v  # 输出版本号（如 v18.x.x）
npm -v   # 输出 npm 版本

1.2 安装 Nginx（静态文件托管和反向X_X）

# 安装 Nginx
yum install -y nginx

# 启动并设置开机自启
systemctl start nginx
systemctl enable nginx

# 验证运行状态
systemctl status nginx

2. 部署 Vue 项目

2.1 上传项目代码

  • 通过 scp 或 Git 克隆项目到服务器： 
    git clone your-vue-project.git
cd your-vue-project

2.2 安装依赖并构建

# 安装依赖
npm install

# 生产环境构建（生成 dist 目录）
npm run build

关键点：构建后生成的 dist 目录是静态文件的核心输出，需通过 Nginx 托管。

3. 配置 Nginx

3.1 修改 Nginx 配置文件

编辑 /etc/nginx/nginx.conf 或新建站点配置（如 /etc/nginx/conf.d/vue.conf）：

server {
    listen 80;
    server_name your-domain.com;  # 替换为域名或服务器IP

    root /path/to/your-vue-project/dist;  # 指向构建后的 dist 目录
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;  # 支持 Vue Router 的 history 模式
    }
}

3.2 重启 Nginx

# 测试配置语法
nginx -t

# 重启 Nginx
systemctl restart nginx

4. 高级配置（可选）

4.1 HTTPS 安全加固

使用 Certbot 申请免费 SSL 证书：

# 安装 Certbot
yum install -y certbot python3-certbot-nginx

# 获取证书并自动配置 Nginx
certbot --nginx -d your-domain.com

4.2 性能优化

  • 启用 Gzip 压缩（在 Nginx 配置中添加）： 
    gzip on;
gzip_types text/css application/javascript;
  • 缓存静态资源： 
    location ~* .(js|css|png)$ {
  expires 365d;
}

5. 验证与问题排查

  • 访问测试：浏览器打开 http://服务器IP 或域名，确认页面加载正常。
  • 常见问题：
    • 404 错误：检查 dist 路径是否正确，或 Vue Router 未配置 try_files。
    • 权限问题：确保 Nginx 用户（通常为 nginx）有权限读取 dist 目录： 
      chown -R nginx:nginx /path/to/dist

总结

在 Alibaba Cloud Linux 3.2104 LTS 部署 Vue 项目的核心流程是：安装 Node.js → 构建项目 → 配置 Nginx 托管 dist 目录。
关键命令：npm run build 生成静态文件，Nginx 的 try_files 解决路由问题。如需生产环境，务必启用 HTTPS 和性能优化。

相关推荐