手把手教你如何把vue项目打包后部署到服务器(小白教程)

文章详细介绍了如何使用VSCode对Vue项目进行打包,生成的dist文件夹通过FinalShell连接到服务器。接着,利用宝塔面板管理Linux服务器,添加新站点,将打包后的文件上传至服务器,最终通过域名访问项目。
摘要由CSDN通过智能技术生成

一.需要用到的工具

vscode 下载链接:Visual Studio Code - Code Editing. Redefined

FinalShell 下载链接:FinalShell官网

二.打包步骤

1.vscode打开你的vue项目-- >点终端 -- >输入npm run build 按回车进行打包;

 2.打包成功 , 生成了dist文件夹, 打包好的文件会默认存放在里面;


 

三. 用FinalShell连接服务器,获取宝塔面板地址


1.下载FinalShell:
点击如下链接:FinalShell官网

2.选择适合自己电脑系统的版本进行下载


3.下载安装好软件后双击打开,选择SSH连接,填写如下信息,最后点击确定


4.连接成功之后
(1)输入命令:bt
(2)查看服务器是否安装宝塔,如已安装则出现宝塔面板命令,如未安装,参照如下链接:宝塔面板下载,免费全能的服务器运维软件(本教程使用的是linux服务器)
(3)输入14,查看并复制外网面板地址以及用户名,密码


(4) 在浏览器中粘贴刚复制的外网面板地址

(5)输入用户名密码登录出现如下页面 ,点击左侧网站-->添加站点-->输入域名-->根目录地址会 自动生成-->点击提交-->站点创建成功

 

(6)点击根目录,进入上传页面

(7)点击上传,按照下图方式上传之前打包好的dist文件夹下的内容,
         上传成功后就可以通过域名访问项目啦

如果vue3项目打包后无法请求到后台接口,可能是因为以下原因: 1.后台接口路径错误:部分服务器的配置可能不同,导致后台接口的路径和本地环境中的路径不一致。因此,需要确保在部署服务器之前,后台接口的路径是正确的。 2.服务端口号被占用:如果本地环境中使用的端口号在服务器上已被占用,则服务无法启动。因此,需要确保服务端口号是正确的,并且与服务器上的其它服务不冲突。 3.服务器未正确安装相关依赖:如果服务器未正确安装vue3项目所需的相关依赖,则无法正常运行。因此,在部署服务器之前,需要确保服务器上已经安装了vue3项目所需的相关依赖。 4.浏览器中存在跨域问题:因为vue3项目打包后生成的是静态资源文件,所以在浏览器中可能会遇到 CORS 跨域问题。为避免这种情况,需要在后台配置跨域请求支持,或者使用代理解决跨域问题。 针对上述问题,可以通过以下解决方案来解决: 1.检查后台接口路径是否正确,并确保路径是服务器上的实际路径。 2.检查服务器上的端口号是否正确,避免与其它服务冲突。 3.确保服务器上已经安装了vue3项目所需的相关依赖。 4.使用代理或在后台配置跨域请求支持。 总之,针对以上问题,需要逐一排查,逐步解决,才能保证vue3项目打包后正常部署服务器并能与后台接口进行正常通讯。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值