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地址,看到该网页,写完!撒花