将vue项目打包部署到云服务器(傻瓜式宝塔面板)

前提准备

  1. 拥有一台云服务器(以个人的轻量级云服务器视角)
    将vue项目打包部署到云服务器(傻瓜式宝塔面板)_第1张图片

  2. 下载Xshell

将vue项目打包部署到云服务器(傻瓜式宝塔面板)_第2张图片

  1. 先将自己的vue项目打包,得到dist就行
npm run build

将vue项目打包部署到云服务器(傻瓜式宝塔面板)_第3张图片

通过xhsell连接云服务器

将vue项目打包部署到云服务器(傻瓜式宝塔面板)_第4张图片
第一步应该是先创建实例,重置实例密码
然后拿到公网ip,打开xshell新建会话,将公网ip输入主机 框,然后点击连接
将vue项目打包部署到云服务器(傻瓜式宝塔面板)_第5张图片
接下来会让你保存ssh密钥,然后就是输入服务器实例的账号密码了
将vue项目打包部署到云服务器(傻瓜式宝塔面板)_第6张图片
出现这个就是已经和服务器连接成功将vue项目打包部署到云服务器(傻瓜式宝塔面板)_第7张图片

安装宝塔面板

  1. 首先先注册个宝塔账号 点击跳转宝塔官网
    点击右上角的注册,完成注册
  2. 获取安装命令 点击跳转宝塔下载页面
    这里复制对应的链接下载,一般都是centos
    将vue项目打包部署到云服务器(傻瓜式宝塔面板)_第8张图片
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

  1. 下载
    将复制到的下载链接黏贴到xshell

将vue项目打包部署到云服务器(傻瓜式宝塔面板)_第9张图片
然后输y
在这里插入图片描述

出现以下的命令就是下载成功了
将vue项目打包部署到云服务器(傻瓜式宝塔面板)_第10张图片

4.放行8888端口
进入阿里云服务器的控制台(ESC服务器是安全组)将vue项目打包部署到云服务器(傻瓜式宝塔面板)_第11张图片
添加8888端口即可将vue项目打包部署到云服务器(傻瓜式宝塔面板)_第12张图片
然后在复制给你的外网面板地址

账号输入给你的username
密码输入给你的password
然后在极速安装相关环境就行
将vue项目打包部署到云服务器(傻瓜式宝塔面板)_第13张图片

网站上线

先创建一个站点(看图操作)
将vue项目打包部署到云服务器(傻瓜式宝塔面板)_第14张图片
删除默认文件
将vue项目打包部署到云服务器(傻瓜式宝塔面板)_第15张图片
将dist里面的文件拖入上传即可
将vue项目打包部署到云服务器(傻瓜式宝塔面板)_第16张图片
浏览器输入你的公网ip地址,完成!
将vue项目打包部署到云服务器(傻瓜式宝塔面板)_第17张图片
如果帮助到,请给个免费的赞吧,后续看情况出宝塔配置教程

你可能感兴趣的:(前端,vue.js,阿里云,服务器)