vue项目打包上传服务器

PS:因为我现在还是个学生,所以服务器是自己去阿里云上租了两年的服务器,挺便宜的,上传之前要准备好Xshell 5

第一步 Xshell 5创建会话属性

在这里插入图片描述
名称就是起的一个你能记住的名字就行了,主机就是你服务器的IP地址,端口号不用改,默认都是22,填完后点击左边的用户身份验证
在这里插入图片描述
这个用户名和密码就是服务器上的用户名密码,我用的阿里云的用户名直接就是root,密码是当时自己设置的一个密码。
然后点击确定就能连接进自己的服务器了
在这里插入图片描述

第二步 服务器上下载apache2 (如果服务器上有apache2的就直接跳下一步)

sudo apt-get install apache2
可能会遇到的问题

在这里插入图片描述
会有很多404 Not Found,最后一句提示说apt-get要更新,所以先apt-get uptdate,更新完后,再用sudo apt-get install apache2就可以下载完成了。

我们可以ls看一下etc/init.d目录
在这里插入图片描述
有了之后重启一下apache2

sudo /etc/init.d/apache2 restart

在这里插入图片描述

第三步 打包vue项目

vue我是在webstorm中写的,下面就有个终端,很方便,如果没用webstorm,直接打开cmd到你项目下的路径写也是一样的
注意:在config文件夹下的build中,把assetsPublicPath改成'./'这样打包放服务器访问时不会报错
在这里插入图片描述

npm run build

在这里插入图片描述
打包完成之后,你可以看见你项目中多了一个dist文件夹,但是index.html点击开来不会显示,这很正常,挂载上去就能正常显示了。(记得vue中所有图片的路径不要写成…/…/这种相对路径,vue中有一个@,这个符号直接指的是src文件,所以最好全部用成@,这样就不会出现问题)
在这里插入图片描述
把static和index.html文件压缩,我是压缩成zip格式文件,就是红框下面的static.zip

第四步 上传挂载到服务器

cd /var/www/html

可以用ls看到里面有一个index.html,你可以在浏览器中直接输服务器的ip地址,就会显示出这个index中的内容(我忘记截张图了)。
为了安全考虑,我先将index.html另存为indexbak.html

rz -E

选择你电脑中的static.zip文件上传至服务器

可能遇到的问题

在这里插入图片描述

apt install lrzsz

下载一下这个rz
在这里插入图片描述
上传完成之后,解压static.zip

unzip static.zip
可能遇到的问题

在这里插入图片描述

apt install unzip

最终解压成功
在这里插入图片描述
可以在浏览器上输入服务器的ip地址,看到该网页,写完!撒花
在这里插入图片描述

  • 1
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

痴心的萝卜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值