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

前提准备

拥有一台云服务器（以个人的轻量级云服务器视角）
下载Xshell

先将自己的vue项目打包，得到dist就行

npm run build

通过xhsell连接云服务器

第一步应该是先创建实例，重置实例密码
然后拿到公网ip，打开xshell新建会话，将公网ip输入主机框，然后点击连接

接下来会让你保存ssh密钥，然后就是输入服务器实例的账号密码了

出现这个就是已经和服务器连接成功

安装宝塔面板

首先先注册个宝塔账号点击跳转宝塔官网
点击右上角的注册，完成注册
获取安装命令点击跳转宝塔下载页面
这里复制对应的链接下载，一般都是centos

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

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

然后输y

出现以下的命令就是下载成功了

4.放行8888端口
进入阿里云服务器的控制台（ESC服务器是安全组）
添加8888端口即可
然后在复制给你的外网面板地址

账号输入给你的username
密码输入给你的password
然后在极速安装相关环境就行

网站上线

先创建一个站点（看图操作）

删除默认文件

将dist里面的文件拖入上传即可

浏览器输入你的公网ip地址，完成！

如果帮助到，请给个免费的赞吧，后续看情况出宝塔配置教程

将vue项目打包部署到云服务器（傻瓜式宝塔面板）相关推荐

vue项目打包部署到服务器,Vue项目打包部署到apache服务器的方法步骤
vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进 ...
Vue项目打包部署到Nginx服务器步骤总结
前期准备工作: 1. 准备一台服务器: 2. 根据服务器的系统环境安装配置Nginx; 3. 了解Nginx的配置文件,了解常用的linux系统操作命令 4. 进行Vue项目的打包部署因为我只是单纯 ...
Vue项目打包部署到apache服务器
vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进 ...
Vue项目打包部署总结
由于之前对前端部署上线这一套不清楚,所以这次通过查找多方资料总结一下.使用Vue作先后端分离项目时,一般前端是单独部署,用户访问的也是前端项目地址,所以前端开发人员颇有必要熟悉一下项目部署的流程与各种 ...
Vue 项目打包部署实战完整流程总结!
使用Vue做前后端分离项目时,通常前端是单独部署,用户访问的也是前端项目地址,因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了. Vue项目打包部署本身不复杂,不过一些前端同学可能 ...
vue项目打包部署流程
vue项目打包部署流程一.打包二.部署三.部署多个项目一.打包 (可选)去除打包后会生成的map文件:在vue.config.js中添加productionSourceMap: false, ...
vue项目打包部署-----解决打包后访问资源失败问题
vue项目打包部署-----解决打包后访问资源失败问题参考文章: (1)vue项目打包部署-----解决打包后访问资源失败问题 (2)https://www.cnblogs.com/ycsc/p/1 ...
vue项目打包部署nginx跨域
vue项目打包部署nginx跨域 vue项目连接外部api接口时,打包部署到nginx后出现api404,api跨域问题,这个时候需要给vue项目本身进行跨域,再配置nginx中进行跨域即可解决,详见 ...
阿里云服务器搭建和宝塔面板连接
最近有些项目需要云端的测试,所以申请了阿里云服务器,作为新手,这里做个初步的记录,供以后参考. 服务器购买点击登录阿里云官网,登陆比较方便,使用支付宝.钉钉.或者阿里云等均可直接登录.由于尚未在阿里 ...