从0到1部署Vue项目及搭建个人博客

Z时代
2024-01-10
分类：综合

???? 前言

大家好，元旦快乐！

之前完成了一个vue练手项目，是一个手机端的购物APP，从服务器购买到最终部署完成，同时也搭建了个人博客，前前后后经历了大概四五天的样子，在此记录一下过程中踩的坑和一些知识点，供以后阅读查看。

???? 正文

一. 服务器购买与简单的配置

我这里使用的是阿里云服务器，所以以阿里云服务器为例说明该过程，正好赶上 618 阿里云搞活动，还有新人价，买了三年，220 多，很划算（最近元旦，新人价三年不到200，更加优惠了，冲~）。

首先打开阿里云官网，注册账号并按要求实名认证。

扫码直达阿里云：

因为购买服务器必须实名认证，这里 ECS（Elastic Compute Service）就是服务器的意思，不同的厂家名字不一样，比如腾讯的服务器叫 CVM，总之买服务器就是买这个。下拉进入下面的界面，我们新手直接选择第一个或者第二个就够了，性价比都可以，这里我选择第一个，因为第一个可以买三年，第二个只能买一年。

点立即购买（忽略加个，因为我已经买过了，这是原价），这里地域的话，有时候（可能是上午）选择张家口最便宜，但是张家口网络不好，还是不要选择，价格问题的话我没遇到，哈哈，我这里当时选择哪一个区域都是一样的价格，这里的区域是说网站用户离得越近，理论上访问速度就越快，我这里选择的是上海（可能这是我访问速度比较慢的原因，本来想选北京的，因为自己离北京近…），后面一项随机分配不用手动选择操作系统的话，后续可以随时更换，所以这里选择哪个都无所谓，但是大家都推荐 CentOS，因为无论是搭建网站还是部署软件，这个系统用的比较多，而 Ubuntu 是我们平时学习的时候用的多一些，这里我直接选择 CentOS，版本的话这里也要注意，选择 7.x 的版本，因为据说 8 的版本不维护了，网上教程的话也都是 7.x ，8 的 bug 比较多。

购买时长选择三年，其余都是默认选项，然后点立即购买，付款结算就可以了。

然后进入控制台，这里是服务器的大概情况。

名称可以修改，我这里做了修改，实例也就是服务器的意思（不知道为啥有这么个抽象的名字，可能是 instance 翻译过来的）…公网 ip 也就是你的服务器的地址，将来别人可以访问这个 ip 地址（没有域名的情况下，有了域名就直接访问域名了），安全组等会说，也很重要，一长串字母就是服务器，点击进入下一个界面。

首先要点击重置实例密码，因为服务器开始没有密码（但是有账号，账号是 root），按照要求设置一个密码，操作系统这里是灰色的，点击停止服务器后才能更换操作系统，后续我们在服务器上进行了一通迷之操作不知所措的时候，就可以重装系统，从头再来，重新做人，又是一台崭新的服务器。

接着点击添加安全组规则（我这里是旧版界面，如果和我的不一样，点击右上角的回到旧版就可以了），再点击安全组 ID（一长串字母）到这个界面，我们这里必须添加 80 端口，因为 nginx 服务器默认监听 80 端口，服务器最开始这个端口是没有放行的，点击添加安全组规则。

这里协议类型选择 HTTP(80)，授权对象填 0.0.0.0/0，其余默认，然后点击确定就成功放行了 80 端口，这里顺便也放行 8888 端口，因为宝塔管理面板使用的是这个端口，但是协议类型要选择自定义 TCP，端口范围填写8888/8888，这样就成功放行了 8888 端口，如果要放行其他端口，类似的操作，我这里同时也放行了 8080 端口，因为我把 vue 项目部署在了 8080 端口，默认的 80 端口部署了博客（80 端口是默认端口，也就是说访问公网IP和访问公网 ip:80 是一样的），服务器基本的设置到这里就可以了，然后我们下载安装Xshell和Xftp软件来远程连接服务器，也可以用别的软件，比如 secureCRT，但是这个软件收费的，Xshell 和 Xftp 提供个人版的免费版本（爽歪歪，付钱是不可能的）。

二. Xshell与Xftp的安装与使用

Xshell 类似 cmd，是一个可以输入 linux 命令的终端窗口，Xftp 是一个可视化的文件传输软件，可以直接通过拖动的方式将本地文件传输到远程服务器，比较方便。

不要在百度直接搜然后下载软件，或者让你破解啥的，Xshell 和 Xftp 官网提供免费的个人版，打开官网，

扫码直达官网：

点击所有下载下面的家庭/学校免费，填写姓名和邮箱，邮箱一定填写正确，他会把下载链接发到你的邮箱，然后点击邮箱里的下载链接就可以了，但是我开始下载非常慢，重试了好几次也不行，可能是电脑长时间不关机缓存太严重了，后来重启了电脑，也不是很快，后来总算是成功了，如果你的速度很慢也不用慌，我把最新版的7版本已经上传到百度云，直接下载使用就可以了，提取码: yjke\

扫码直达百度云：

下载下来，双击安装包安装两个软件，没啥可说的，一路 next 就可以，涉及到安装路径的时候可以修改一下，提前在想要安装软件的地方建好文件夹，不要把软件都塞到 C 盘。

安装好以后，先打开 Xshell，点击左上角的新建会话，名称随意，协议不用动，因为我们是进行 ssh 远程连接，所以是 ssh，主机就是你的公网 ip，端口的话也不用动，22 端口就是 ssh 远程连接用的，80 端口需要我们手动放行，这个不用，购买服务器以后已经提前开放了。

然后点用户身份验证，输入服务器的账号和密码，账号是 root，密码是前面在官网已经设置好的实例密码，然后点击连接即可，出现以下欢迎界面就代表已经连接成功。

然后点击这个图标可以打开 Xftp 软件。

打开以后可以看到，软件的左边部分是本机的文件目录，右边部分是远程服务器的文件目录。

如果只是部署 vue 项目，第 3 点宝塔软件及以后的操作就不用进行了，可以直接在我们的 CentOS 上安装 nginx 服务器，然后按照以下步骤部署项目。由于我刚开始直接在公网 ip 部署了软件，后来想要再搭建博客，结果 80 端口被占用了（因为 nginx 默认监听 80 端口），百度了好久修改端口也不成功，我就打算先搭建博客到公网 ip 上，再在其他端口部署软件，所以就重装系统重头再来了，最后也总算是成功了。搭建博客并部署软件接着看第三部分。

1.安装nginx服务器

网上好多方法安装很麻烦，让你安装各种工具，下载各种包解压，这里参考我写的这一篇文章安装即可。

安装好 nginx 服务器后，在浏览器输入你的公网 ip，网上都说显示 nginx 的欢迎界面，但是我这里是CentOS 的欢迎界面，不过无所谓了，到这里已经成功安装了 nginx 服务器。

2.npm run build打包vue项目，生成dist文件夹

默认情况下，静态 HTML 文件位于 “/usr/share/nginx/html” 。如果我们不想做任何修改就能直接看到自己的项目，直接将 dist 文件夹中的所有文件全选复制，然后粘贴到这个html文件夹中进行替换即可，此时项目就被部署到了默认的 80 端口，浏览器直接打开你的公网 ip 地址就可以看到项目了。如果想要部署在其他端口，就要修改 nginx.conf 配置文件进行配置，具体后边再说。

3.路由history模式的相关设置

这里可能还会有一个问题，vue-router 使用默认 hash 模式，在本地与部署线上环境后都没有问题，但是我们一般要去掉 URL 中的 # 号，所以会使用 history 路由模式，所有项目部署到线上环境后，首页能正常访问，菜单内点击切换也没有问题，但当你刷新页面后，则出现 404 Not Found 的问题，刷新页面时访问的资源在服务端找不到，因为此时 vue-router 设置路由地址被当作url地址，此时的地址路径肯定不是真实存在的，所以出现 404 现象。

解决办法如下：**

在 nginx.conf 配置文件中添加 vue-route 的跳转设置，配置完再重启 nginx 服务器。

配置方式如下：打开 Xshell，在命令行中输入 vim /etc/nginx/nginx.conf ，vim 是用于编辑文件的命令，后面的路径是 nginx 服务器配置文件的默认路径，然后按 i 进入编辑模式，在 server 中添加如下代码，按esc 退出编辑模式。

三. 宝塔软件与LNMP环境的安装配置

然后我们使用宝塔来部署环境按照B站这个视频一步一步来就可以了，很简单。

扫码直达B站视频：

四. 基于WordPress搭建个人博客

上面的视频中会讲解。

五. Vue项目部署

此时再部署 vue 项目，需要我们新开一个端口（之前已经放行过 8080，这里不使用 8080，因为如果使用这个端口的话，在添加网站时会显示“端口范围不合法”，这是因为宝塔设置 8080 端口为 Tomcat 默认端口，这里使用 8088），打开 Xftp，然后将 dist 文件夹放到你喜欢的路径，再进入宝塔首页，点击软件处的 Nginx，再点击配置修改，再手动增加一个 server，输入以下内容，注意都要把参数换成是自己的，包括 listen、server_name、root，剩余内容可以保持不变。

此时，打开浏览器，输入47.100.63.192:8088，就能看到部署的项目了~（温馨提示，使用手机浏览器打开效果最佳）或者扫描下方二维码也可以看到：