文章目录
- 概要
- 整体部署流程
- 技术细节
- 小结
概要
vue3前端项目部署在阿里云轻量服务器
整体部署流程
首先有一个Vue3前端项目和阿里云应用服务器
-
确保环境准备
-
如果是新的服务器，在服务器内运行以下命令更新软件包
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
-
-
构建vue3项目，并上传构建文件到服务器
- 在本地项目目录下运行以下命令构建项目：
npm install npm run build - 将生成的dist文件夹上传到服务器，我这里用的是xftp：
- 在本地项目目录下运行以下命令构建项目：
-
配置nginx
- 编辑Nginx配置文件（默认路径为 /etc/nginx/nginx.conf 或 /etc/nginx/conf.d/default.conf）：
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; }
- 编辑Nginx配置文件（默认路径为 /etc/nginx/nginx.conf 或 /etc/nginx/conf.d/default.conf）：
说明：
- <你的域名或服务器IP> 替换为实际的域名或 IP 地址。
- try_files $uri /index.html; 用于处理 Vue Router 的 history 模式。
-
测试Nginx配置是否正确
sudo nginx -t -
重新加载Nginx
sudo systemctl reload nginx -
验证部署
- 在浏览器中访问 http://<你的域名或服务器IP>。
- 如果一切正常，你应该能够看到 Vue 项目运行的页面。
技术细节
- dist文件位置一定要放置正确
- nginx配置完后要重新启动
小结
这部分只把vue3前端项目部署在阿里云轻量应用服务器上，后面计划与flask后端项目配合起来使用
下图是我成功配置后的截图
