24小时在线平台

当前位置: 24小时在线平台 > 部署教程大全 > 文章页

如何把vue项目部署服务器(宝塔面板)上

时间:2025-05-12 04:51来源: 作者:admin 点击: 23 次
文章浏览阅读1.4w次,点赞22次,收藏133次。本文详细介绍了如何对Vue项目进行打包,通过`npmrunbuild`生成dist文件,然后在宝塔管理界面添加站点,设置伪静态规则,并上传dist文件进行部署。在遇到访问问题时,检查域名、伪静态设置和Nginx配置是关键。

要宝塔上部署前端Vue项目,可以按照以下步骤进行操作: 1. 首先,将准备好的Vue项目进行打包,使用命令`npm run build`,这将生成一个dist文件夹。 2. 登录宝塔面板,并进入左侧的网站对应页面。 3. 如果还没有域名,可以添加自己的服务器地址作为站点。如果已经添加过了服务器地址,想在服务器的其他端口上展示项目,可以随意填写一个不存在的域名。 4. 进入当前添加好的站点,点击右侧的设置,进入设置页面。 5. 在设置页面中,添加自己服务器的地址和端口(端口可以自行选择),然后点击添加。接着,点击删除之前随意添加的域名,将添加的服务器地址和端口作为新的域名。 6. 进入当前创建好的站点对应的文件路径,可以选择是否删除原始文件。将打包生成的dist文件夹放入该路径中。 7. 如果需要配置反向代理,可以在网站对应页面的设置中找到反向代理选项,并添加反向代理。请确保代理目录与前端配置的代理名称一致,设置目标URL和发送域名为需要代理的地址。 8. 如果需要部署多个项目,可以在vue-router文件中使用history模式,并设置base路径为指定的子路径。在宝塔的设置配置文件中添加相应的语句。 以上是在宝塔上部署前端Vue项目的一般步骤。根据具体情况,可能还需要进行其他配置。

(责任编辑:)
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:
发布者资料
查看详细资料 发送留言 加为好友 用户等级: 注册时间:2025-06-27 08:06 最后登录:2025-06-27 08:06
栏目列表
推荐内容