如何在宝塔面板部署vue项目
1、打包自己的vue项目文件
2、宝塔面板登录 并进入左侧网站对应的页面
3、添加站点
如果没有域名的可以添加 自己的服务器地址 如果服务器地址已经 添加过了 想在服务器其他端口 展示项目则可以 随便填写过域名 （ 有域名的可以跳到第6步哦 ）
4、进入当前添加好了的站点 点击 右侧的设置 进入设置页面
5、添加自己服务器的 地址加端口
（端口：自己想要访问前端页面以什么 端口访问）点击添加 然后 点击删除之前随便 添加的域名 这里的48.125.35.65是随便打的
6、进入当前创建好了的站点 对应的文件路径
（或者直接点击 根目录就可以进入）
7、进入当前的目录后可以选择是否删除它的原始文件
（最好还是不要删除 .htaccess文件 与 .user.ini文件 这边也不太清楚会不会出现问题） 然后把打包的dist放入进来（这边就不操作放入了）
配置反向代理
如果需要操作反向代理的话 进入网站对应页面 设置 找到对应的反向代理 添加反向代理
打开高级功能才会出现 代理目录 代理目录要写前端配置的代理的同样的（我这边的前端配置的代理名称为/consumapi 需要在后面添加个/ 才会有效果）代理名称随便写 目标URL 与 发送域名 写自己需要代理地址 内容替换这里看自己的项目（我这边是没有这个） 然后点击提交就可以
部署多个项目
vue-router文件 history 模式 base为/consumption/ base表示在所有路由前都会加上/consumption/
vue.config.js文件 publicPath pusblicePath 指定子路径
在站点的 设置 配件文件里添加该语句 如果路径为/consumption/ 则会到当前站点的根目录下的consumtion文件夹里寻找资源（不知道是不是这样解释的）
添加的配置
location ^~ /consumption/ {
try_files $uri $uri/ /consumption/index.html;
} 完整文件
总结
到此这篇关于如何在宝塔面板部署vue项目的文章就介绍到这了,更多相关宝塔部署vue项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了Vue2 Dialog弹窗函数式调用实践示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
前端前后端接⼝处理时经常会遇到需要转换不同时间格式的情况,下面这篇文章主要给大家介绍了关于vue各种时间类型转换的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了vue-cli3.X快速创建项目的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了Vue如何循环提取对象数组中的值,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
这篇文章主要介绍了Vue中select下拉框的默认选中项的三种情况解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要给大家详细介绍一下Vue3中的基本语法，文中的示例代码讲解详细，对我们学习Vue3有一定的帮助，感兴趣的小伙伴可以了解一下2022-11-11
vite+vue3+tsx项目打包后动态路由无法加载页面的问题及解决
这篇文章主要介绍了vite+vue3+tsx项目打包后动态路由无法加载页面的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
作为经历过大型项目洗礼的前端工程师,小编深知重复提交问题绝非简单的按钮禁用就能解决,今天,就将带大家构建一套生产级的重复提交防御体系,涵盖从基础到架构的全套方案2025-06-06
在学习 Vue.js 的过程中,数据绑定 是最基础也是最重要的概念之一,本文将深入讲解 Vue 中的两种数据绑定方式,即单向绑定 和 双向绑定,希望对大家有所帮助2025-12-12
在vue-cli的组件模板里使用font-awesome的两种方法
今天小编就为大家分享一篇在vue-cli的组件模板里使用font-awesome的两种方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论