vue3项目部署在阿里云轻量应用服务器上

LL.。2024-11-25 0:04

文章目录

概要

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

整体部署流程

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

确保环境准备
- 如果是新的服务器，在服务器内运行以下命令更新软件包
  bash 复制代码
```
sudo apt update && sudo apt upgrade -y  # Ubuntu/Debian
sudo yum update -y                     # CentOS
```
- 在服务器内安装Node.js和npm工具
  bash 复制代码
```
sudo apt update
sudo apt install -y nodejs npm
```
- 安装 Nginx
  bash 复制代码
```
sudo apt update
sudo apt install -y nginx
```
- 启动Nginx
  bash 复制代码
```
systemctl start nginx
```
构建vue3项目，并上传构建文件到服务器
- 在本地项目目录下运行以下命令构建项目：
  bash 复制代码
```
npm install
npm run build
```
- 将生成的dist文件夹上传到服务器，我这里用的是xftp：

配置nginx

编辑Nginx配置文件（默认路径为 /etc/nginx/nginx.conf 或 /etc/nginx/conf.d/default.conf）：
bash 复制代码
```
sudo nano /etc/nginx/conf.d/vue-app.conf
```

添加以下内容

bash 复制代码

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配置是否正确
bash 复制代码
```
sudo nginx -t
```
重新加载Nginx
bash 复制代码
```
sudo systemctl reload nginx
```
验证部署

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

技术细节

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

小结

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