使用宝塔面板中Nginx部署前端Vue项目完整步骤
更新时间：2024年10月21日 10:03:30 作者：鱼文乐~~
在Kubernetes(K8S)部署前端Vue项目通常会涉及到使用Nginx作为静态资源服务器的一个重要部分,这篇文章主要给大家介绍了关于使用宝塔面板中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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了vue实现浏览器桌面通知的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
这篇文章主要介绍了vue如何利用store实现两个平行组件间的传值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要给大家介绍了关于vue跳转页面常用的4种方法与区别,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-03-03
Vue中计算属性和监听属性及数据的响应式更新和依赖收集基本原理讲解
computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下2023-03-03
利用vuex-persistedstate将vuex本地存储实现
这篇文章主要介绍了利用vuex-persistedstate将vuex本地存储的实现，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
解决ant-design-vue中menu菜单无法默认展开的问题
这篇文章主要介绍了解决ant-design-vue中menu菜单无法默认展开的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
Volar 与vetur相同,volar是一个针对vue的vscode插件,下面这篇文章主要给大家介绍了关于Vue3格式化Volar报错的原因分析与解决方法,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要为大家详细介绍了vue3实现CSS无限无缝滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要给大家介绍了关于Vue3导出pdf文件的相关资料,最近项目有个需求,将系统统计的数据生成分析报告,然后可以导出成PDF,这里给大家总结下,需要的朋友可以参考下2023-08-08
本篇文章主要介绍了vue省市区三联动下拉选择组件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
最新评论