🎄 前言
大家好，除夕高兴！
之前实现了一个 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，就能看到部署的我的项目了~（舒适提醒，应用手机浏览器关上成果最佳）或者扫描下方二维码也能够看到：
👋 结语
- 感激浏览，本次分享就到这里完结了~
欢送关注微信公众号：前端星海