概要

vue3前端项目部署在阿里云轻量服务器

整体部署流程

首先有一个Vue3前端项目和阿里云应用服务器

1. 确保环境准备

   • 如果是新的服务器，在服务器内运行以下命令更新软件包

     sudo apt update && sudo apt upgrade -y  # Ubuntu/Debian
     sudo yum update -y                     # CentOS
     

   • 在服务器内安装Node.js和npm工具

     sudo apt update
     sudo apt install -y nodejs npm
     

   • 安装 Nginx

     sudo apt update
     sudo apt install -y nginx
     

   • 启动Nginx

     systemctl start nginx
     

2. 构建vue3项目，并上传构建文件到服务器

   • 在本地项目目录下运行以下命令构建项目：

     npm install
     npm run build
     

   • 将生成的dist文件夹上传到服务器，我这里用的是xftp：
     

3. 配置nginx

   • 编辑Nginx配置文件（默认路径为 /etc/nginx/nginx.conf 或 /etc/nginx/conf.d/default.conf），但约定成俗配置的是sites-available和sites-enabled：
     这里一定一定一定要注意两个配置地方二选一，千万不要同时在两个地方同时配置，不然会出现sever name冲突，当配置后端flask时，会出现其他的问题。

     sudo nano /etc/nginx/conf.d/vue-app.conf
     

   • 添加以下内容

     server {
         listen 80;
         server_name <你的域名或服务器IP>;
     
         root /var/www/vue-app;
         index index.html;
     
         location / {
             try_files $uri /index.html;
         }
     
         error_page 404 /index.html;
     }
     

说明：

• <你的域名或服务器IP> 替换为实际的域名或 IP 地址。
• try_files $uri /index.html; 用于处理 Vue Router 的 history 模式。

4. 测试Nginx配置是否正确

   sudo nginx -t
   

5. 重新加载Nginx

   sudo systemctl reload nginx
   

6. 验证部署

• 在浏览器中访问 http://<你的域名或服务器IP>。
• 如果一切正常，你应该能够看到 Vue 项目运行的页面。

技术细节

• dist文件位置一定要放置正确
• nginx配置完后要重新启动

小结

这部分只把vue3前端项目部署在阿里云轻量应用服务器上，后面计划与flask后端项目配合起来使用
下图是我成功配置后的截图