宝塔Nginx部署Vue项目并实现后端交互

宝塔Nginx部署Vue项目并实现后端交互

本文将介绍如何使用宝塔面板上的Nginx配置反向代理，实现Vue项目与后端接口的交互。

1. 安装Nginx

在宝塔面板中，进入软件商店，找到Nginx，点击安装即可。

2. 配置Nginx反向代理

1. 在宝塔面板中，进入网站管理，找到要部署的网站，进入网站设置，找到反向代理设置。
2. 填写以下内容：

• 反向代理类型：HTTP
• 反向代理地址：http://localhost:端口号（例如：http://localhost:3000）
• 反向代理路径：'/api'

3. 保存设置后，重启Nginx。

3. 部署Vue项目

1. 将Vue项目打包成静态文件。
2. 上传打包后的静态文件到网站根目录下的'public'文件夹中。

4. 测试

访问网站地址'/api'，如果能正常访问后端接口，说明部署成功。

注意事项：

1. 确保后端接口已经正确部署，并且能够正常访问。
2. 确保Vue项目的接口地址与Nginx反向代理的地址一致。
3. 部署后，可能需要修改Vue项目的axios配置，将接口地址设置为相对路径。例如，修改为'axios.defaults.baseURL = '/api''。