最近在尝试把之前的项目部署到服务器上，因为之前部署过java后端，本来觉得1小时左右就可以弄完，没想到最后还是从7点半弄到凌晨，尝试过tomcat部署，nginx部署，都有各种各样的问题，最后找到一篇很简单的可视化部署方式，趁着还记得自己干过什么赶紧记录下来。

前期准备

要实现在云服务器部署Vue项目，首先我们需要

1. 一个写好的vue项目

2. 购买好的云服务器

3. 如果需要定制化域名，我们还需要购买一个专属域名

云服务器的创建和环境搭建以及域名购买设置教程可见本人上一篇文章

非常曲折的新手小白微信小程序springboot后端部署阿里云ESC服务器经历

打包Vue项目

执行命令对创建好的vue程序进行打包

npm run build

debug

遇到问题Syntax Error: Error: Cannot find module ‘imagemin-gifsicle‘

1、在packgae.json 加上 “imagemin-gifsicle” ："^2.0.0",
2、再次运行时报错信息error:cannot find module “gifsicle” 这时就要去node_moudules里删除 image-webpack-loader
3、再去更新下载 cnpm install --save-dev image-webpack-loader
4、重新运行打包命令即可

原文链接：https://blog.csdn.net/qq_41147046/article/details/123152703

完成打包后获得dist文件

进行网站上传

打开宝塔面板，在右栏中找到“网站”，点击添加站点 

在添加站点中写上站点域名，可以是自己的网站ip地址xxx.xx.xxx.xx还可以带端口号

（测试了一下，好像写一个站点格式的名字就可以，不影响网站正常运行)

下面的根目录就是我们要上传dist文件的位置

 

完成创建后，找到刚刚创建的文件目录，上传dist目录

 

完成上传后，回到网站栏，在刚刚创建的域名处将网站目录设置为我们刚刚上传的dist目录，保存

在域名管理处添加上我们的ip，此时，我们的网站就完成了部署，在浏览器输入ip就可以看到我们刚刚部署的网站了

 

 

设置域名

因为我的域名也是在阿里云申请的，所以在阿里云工作台可以很方便地进行域名管理，在这里，我们进入域名控制台，在域名列表中找到我们注册好的域名（找不到域名控制台可以先点击右上角头像旁边的控制台，在总的工作台中点击域名字样旁边的控制台点击进入）
阿里云登录 - 欢迎登录阿里云，安全稳定的云计算服务平台

 

对我们的域名进行解析

 

在解析设置中添加记录，填写主机记录和记录值

 

完成填写后点击确认，第一次添加后可以进行生效检测

 

回到宝塔页面，将我们刚刚设置好的域名添加进来

 

 完成所有设置，此时就可以通过我们的域名访问网站啦