手把手教你使用宝塔部署Vue项目
更新时间：2023年08月14日 08:40:13 作者：喜闻乐见天
这篇文章主要给大家介绍了关于如何使用宝塔部署Vue项目的相关资料,宝塔面板提供了非常方便的方式来部署 Vue 项目,文中通过图文介绍的非常详细,需要的朋友可以参考下
1. Vue项目执行打包命令进行打包得到dist文件夹
npm run build
2. 打开宝塔主页进入网站，选择添加站点
3. 将自己的服务器网址作为域名，默认为80端口，可自行设置备注和根目录，点击提交
4. 点击设置->配置文件，加入如下代码（配置跨域问题），点击保存（建议手敲，格式很重要）
location /api {
proxy_pass http://gmall-h5-api.atguigu.cn;
}
5. 点击文件，进入前面设置的地址，将原有文件全部删除
6. 将前面打包的dist文件夹里面的文件拖到宝塔文件中，进行上传
7. 进入nginx文件夹下的conf文件夹，找到nginx.conf文件，双击进入编辑，找到server下的listen，将端口改为前面设置的端口，保存即可（需要部署多个项目时复制多个server进行配置）
8. 输入前面设置的域名即可进入制作的项目中
总结
到此这篇关于使用宝塔部署Vue项目的文章就介绍到这了,更多相关宝塔部署Vue项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了vue实现横向时间轴组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
多人协作模式下，修改代理比较麻烦，而且很容易某个开发人员会修改了vue.config.js文件后提交了。接下来通过本文给大家分享Vue多环境代理配置方法思路详解,需要的朋友可以参考下2019-06-06
这篇文章主要为大家详细介绍了vue实现聊天框发送表情，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要为大家详细介绍了vue自定义气泡弹窗，包含css晃动动画shake制作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了解决vue项目router切换太慢问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了Nuxt.js实现一个SSR的前端博客的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
这篇文章主要介绍了移动端 Vue+Vant 的Uploader 实现 上传、压缩、旋转图片功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了vite+ts快速搭建vue3项目以及介绍相关特性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要介绍了何时/使用 Vue3 render 函数的教程详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-07-07
这篇文章主要介绍了如何实现vue的tree组件，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下2020-12-12
最新评论