使用宝塔面板中Nginx部署前端Vue项目完整步骤

我相信已经到这一步了，Nginx和宝塔过多的描述我就不说了，直接上干货实操。

第一步：前端项目打包

直接运行Npm run build命令进行打包，会打成一个dist的压缩包

注意：我们前端打包的时候要修改我们连接后端接口的：ip+端口号

然后我们解压成文件夹！
​​​​

第二步：在宝塔面板中直接下载安装我们的Nginx

第三步：上传前端文件

将我们解压好的前端项目文件上传到目录/www/server/nginx/html下

第四步：修改Nginx配置文件

1、

2、

3、

第五步：防火墙放行

这里的端口就是我们刚刚在配置文件中设置的端口

注意：这里出来我们的宝塔面板放行以后还要在我们对应服务器中的安全组进行放行对应的端口

第六步：测试

当我们前面工作都做完了以后我们去访问我们IP+刚刚的端口就可以访问了

如果有域名大家可以配置一下，这样就直接域名加端口访问了。

附：关于vue项目宝塔部署后出现路由跳转方面的Nginx问题

问题描述

Vue项目在宝塔面板中部署后出现了路由跳转故障，并且跳转界面中出现提示Nginx错误

解决方案

确定该项目在本地运行中确实没路由方面问题，宝塔面板部署后才出现相关问题，这是因为没有进行有关配置

进入宝塔面板地址，选择“网站”，对目标站点点击“设置”，在“配置文件”中添加以下内容：

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

总结

到此这篇关于使用宝塔面板中Nginx部署前端Vue项目的文章就介绍到这了,更多相关宝塔面板Nginx部署前端Vue内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！