当前位置：首页 > article >正文

如何将vue2使用npm run build打包好的文件上传到服务器

article 2025/6/3 0:22:57

要将 Vue 2 项目打包并部署到服务器上，并使用 Nginx 作为 Web 服务器，可以按照以下步骤操作：

1. 打包 Vue 2 项目

首先，确保你的 Vue 2 项目已经开发完成，并且可以在本地正常运行。然后使用以下命令进行打包：


npm run build

打包完成后，项目根目录下会生成一个 dist 文件夹，里面包含了所有静态文件（HTML、CSS、JS 等）。

2. 将打包文件上传到服务器

你可以使用 scp、rsync 或者 FTP 工具将 dist 文件夹上传到服务器。以下是使用 scp 的示例：


scp -r dist/ user@your_server_ip:/path/to/your/project

user 是你的服务器用户名。
your_server_ip 是你的服务器 IP 地址。
/path/to/your/project 是你希望将文件上传到的服务器目录。

3. 安装和配置 Nginx

如果服务器上还没有安装 Nginx，可以通过以下命令安装：

对于 Ubuntu/Debian 系统：


sudo apt updatesudo apt install nginx

对于 CentOS/RHEL 系统：


sudo yum install nginx

安装完成后，启动 Nginx 并设置为开机自启：


sudo systemctl start nginxsudo systemctl enable nginx

4. 配置 Nginx 以服务 Vue 应用

接下来，你需要配置 Nginx 来服务你的 Vue 应用。编辑 Nginx 的配置文件：


sudo nano /etc/nginx/sites-available/your_project

在文件中添加以下内容：


server {listen 82;server_name your_domain_or_ip;root /path/to/your/project/dist;index index.html;location / {try_files $uri $uri/ /index.html;}location /api/ {proxy_pass http://your_backend_server;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;add_header Access-Control-Allow-Methods *;add_header Access-Control-Allow-Origin $http_origin;}error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/share/nginx/html;}}

listen xx, xx是你的监听端口
your_domain_or_ip 是你的域名或服务器 IP 地址。
/path/to/your/project/dist 是你上传的 dist 文件夹的路径。
your_backend_server 是后端 API 服务器地址（如果有的话）。/api/代表匹配前端啊baseURL='/api'的时候。例如：proxy_pass http://127.0.0.1:8002/api/;

保存并退出编辑器。

5. 启用 Nginx 配置

创建一个符号链接来启用该配置文件：


sudo ln -s /etc/nginx/sites-available/your_project /etc/nginx/sites-enabled/

然后测试 Nginx 配置是否正确：


sudo nginx -t

如果配置正确，重新加载 Nginx：


sudo systemctl reload nginx

6. 访问你的 Vue 应用

现在，你可以通过浏览器访问你的 Vue 应用了。在地址栏中输入你的域名或服务器 IP 地址，应该就能看到你的 Vue 应用正常运行。

7. （可选）配置 HTTPS

如果你有域名并且希望启用 HTTPS，可以使用 Let's Encrypt 免费 SSL 证书。安装 Certbot 并获取证书：


sudo apt install certbot python3-certbot-nginxsudo certbot --nginx -d your_domain

按照提示操作，Certbot 会自动配置 Nginx 以使用 HTTPS。

总结

通过以上步骤，你已经成功将 Vue 2 项目打包并部署到服务器上，使用 Nginx 作为 Web 服务器。如果有任何问题，可以检查 Nginx 的日志文件（通常位于 /var/log/nginx/error.log）来排查错误。

配置 Nginx 以服务 Vue 应用的核心是通过 Nginx 将用户的请求正确地指向 Vue 应用的静态文件（如 index.html、JavaScript、CSS 等），并确保 Vue 的路由（如 Vue Router）能够正常工作。以下是详细的步骤和解释：

1. Nginx 配置文件的基本结构

Nginx 的配置文件通常位于 /etc/nginx/nginx.conf 或 /etc/nginx/sites-available/ 目录下。每个站点（或应用）通常有一个独立的配置文件。

以下是一个典型的 Nginx 配置文件示例，用于服务 Vue 应用：


server {# 监听端口（HTTP 默认是 80，HTTPS 默认是 443）listen 80;# 服务器域名或 IP 地址server_name your_domain_or_ip;# Vue 应用的静态文件路径root /path/to/your/project/dist;# 默认访问的文件index index.html;# 处理根路径请求location / {# 尝试按顺序查找文件或目录，如果找不到则返回 index.htmltry_files $uri $uri/ /index.html;}# 处理 API 请求（如果有后端服务）location /api/ {# 将请求代理到后端服务器proxy_pass http://your_backend_server;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}# 处理 50x 错误页面error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/share/nginx/html;}}

2. 关键配置项详解

1. `listen`

指定 Nginx 监听的端口号。
HTTP 默认端口是 80，HTTPS 默认端口是 443。
例如：
```
listen 80;
```

2. `server_name`

指定服务器的域名或 IP 地址。
如果使用域名，需要确保域名已经解析到服务器的 IP 地址。

例如：


server_name example.com;

或者：


server_name 192.168.1.100;

3. `root`

指定 Vue 应用静态文件的根目录。
这是 Vue 打包后生成的 dist 文件夹的路径。
例如：
```
root /var/www/vue-app/dist;
```

4. `index`

指定默认访问的文件。
对于 Vue 应用，通常是 index.html。
例如：
```
index index.html;
```

5. `location /`

处理根路径（/）的请求。
使用 try_files 指令来尝试查找文件或目录，如果找不到则返回 index.html。
这是为了支持 Vue Router 的路由功能，确保用户在直接访问非根路径时（如 /about），Nginx 也能正确返回 index.html，由 Vue 应用处理路由。

例如：


location / {try_files $uri $uri/ /index.html;}

6. `location /api/`

如果你的 Vue 应用需要与后端 API 通信，可以通过 Nginx 将 API 请求代理到后端服务器。

例如：


location /api/ {proxy_pass http://your_backend_server;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}

proxy_pass：将请求转发到后端服务器。
proxy_set_header：设置请求头，确保后端服务器能够获取正确的客户端信息。

7. `error_page`

定义错误页面。
例如，当服务器出现 500、502、503 或 504 错误时，返回 /50x.html。

例如：


error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/share/nginx/html;}

3. 完整的配置示例

以下是一个完整的 Nginx 配置文件示例，适用于服务 Vue 应用：


server {listen 80;server_name example.com;root /var/www/vue-app/dist;index index.html;location / {try_files $uri $uri/ /index.html;}location /api/ {proxy_pass http://backend_server;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/share/nginx/html;}}

4. 启用配置

将配置文件保存到 /etc/nginx/sites-available/ 目录下，例如：
```
sudo nano /etc/nginx/sites-available/vue-app
```

创建一个符号链接到 /etc/nginx/sites-enabled/ 目录：


sudo ln -s /etc/nginx/sites-available/vue-app /etc/nginx/sites-enabled/

测试 Nginx 配置是否正确：
```
sudo nginx -t
```

如果测试通过，重新加载 Nginx：
```
sudo systemctl reload nginx
```

5. 验证部署

在浏览器中访问你的域名或服务器 IP 地址，例如：
```
http://example.com
```
或
```
http://192.168.1.100
```

如果一切正常，你应该能够看到 Vue 应用的首页。

6. 常见问题排查

404 错误：
- 检查 root 路径是否正确指向 dist 文件夹。
- 确保 try_files 配置正确。
Vue 路由不生效：
- 确保 location / 中有 try_files $uri $uri/ /index.html;。
Nginx 配置测试失败：
- 使用 sudo nginx -t 检查语法错误。
- 查看 Nginx 错误日志：/var/log/nginx/error.log。

添加用户

python manage.py useradd -u 用户名 -p 密码 -n 昵称 [-s]

后台启动django启动脚本

以大屏为例:

nohup python /fishing_trace_wsp/datacenter/screenbackend/manage.py runserver 0.0.0.0:8001 >> output.log 2>>output.log &

其中 >> 代表追加到文件末尾，output.log是输出日志文件名，&表示任务在后台执行，即使ssh窗口关闭，服务依然会在后台持续运行。

如果是datacenter

则需要先切换到对应虚拟环境(datacenter)，再运行启动指令

conda activate datacenter

nohup python /fishing_trace_wsp/datacenter/backend/manage.py runserver 0.0.0.0:8002 >> output.log 2>>output.log &