编程常用网站,湖北企业模板建站信息,做百度推广送网站,重庆网站公司设计方案文章目录 概要整体部署流程技术细节小结 概要
vue3前端项目部署在阿里云轻量服务器
整体部署流程
首先有一个Vue3前端项目和阿里云应用服务器 确保环境准备 如果是新的服务器#xff0c;在服务器内运行以下命令更新软件包 sudo apt update sudo apt upgrade -y … 文章目录 概要整体部署流程技术细节小结 概要
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.confsudo 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 模式。 测试Nginx配置是否正确 sudo nginx -t重新加载Nginx sudo systemctl reload nginx验证部署
在浏览器中访问 http://你的域名或服务器IP。如果一切正常你应该能够看到 Vue 项目运行的页面。
技术细节
dist文件位置一定要放置正确nginx配置完后要重新启动
小结 这部分只把vue3前端项目部署在阿里云轻量应用服务器上后面计划与flask后端项目配合起来使用 下图是我成功配置后的截图
