手把手教你使用宝塔部署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项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

相关文章

  • 解决vue3.0运行项目warning Insert `·` prettier/prettier问题

    解决vue3.0运行项目warning Insert `·` prettier/pret

    这篇文章主要介绍了解决vue3.0运行项目warning Insert `·` prettier/prettier问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue-router中query取值的坑及解决

    vue-router中query取值的坑及解决

    这篇文章主要介绍了vue-router中query取值的坑及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue中实现页面刷新以及局部刷新的方法

    vue中实现页面刷新以及局部刷新的方法

    这篇文章主要给大家介绍了关于vue中实现页面刷新以及局部刷新的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-01-01
  • 解决removeEventListener 无法清除监听的问题

    解决removeEventListener 无法清除监听的问题

    这篇文章主要介绍了解决removeEventListener 无法清除监听的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 利用SpringMVC过滤器解决vue跨域请求的问题

    利用SpringMVC过滤器解决vue跨域请求的问题

    下面小编就为大家分享一篇利用SpringMVC过滤器解决vue跨域请求的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue 动态路由component 传递变量报错问题解决

    vue 动态路由component 传递变量报错问题解决

    这篇文章主要为大家介绍了vue 动态路由component 传递变量报错问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • vue-quill-editor富文本编辑器上传视频功能详解

    vue-quill-editor富文本编辑器上传视频功能详解

    需求需要实现富文本的功能,同时富文本中还可以上传视频和图片,选来选去最后决定了用这个富文本编辑器,下面这篇文章主要给大家介绍了关于vue-quill-editor富文本编辑器上传视频功能的相关资料,需要的朋友可以参考下
    2023-05-05
  • 深入解析Vue 组件命名那些事

    深入解析Vue 组件命名那些事

    本篇文章主要介绍了深入解析Vue 组件命名那些事,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Vue 两个字段联合校验之修改密码功能的实现

    Vue 两个字段联合校验之修改密码功能的实现

    本文以校验两次密码的一致性应用,给出两个可变属性值的字段之间的联合校验的典型解决方案,通过实例代码给大家介绍Vue 两个字段联合校验之修改密码功能的实现,需要的朋友一起看看吧
    2021-07-07
  • vue项目如何从session中获取对象,并且使用里面的属性

    vue项目如何从session中获取对象,并且使用里面的属性

    这篇文章主要介绍了vue项目如何从session中获取对象,并且使用里面的属性问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12

最新评论