1.腾讯云服务器+宝塔面板部署Vue项目（纯前端）

目录

前言

一、前置条件

二、具体步骤

1.腾讯云进入宝塔

2.进入宝塔

3.Vue打包

三、总结

---

前言

        在部署网站之前，首先我们要先购买一个云服务器，购买一个属于自己的域名，然后进行ICP备案，如果您的网站规模不是很大，这边推荐2核2G的服务器即可，服务器购买在这就不具体介绍了，本篇博客旨在帮助大家部署Vue纯前端项目，如果您想部署SpingBoot和Vue前后端分离项目，或者通过tomcat部署JavaWeb项目，可以去查看我其他文章，本文只介绍部署Vue纯前端项目，帮助想要快速搭建服务器的友友们快速上线属于自己的项目。腾讯云-轻量应用服务器配置（一）——购买+配置（图文详细教程）_轻量服务器部署后配置有那些-CSDN博客

一、前置条件

1.服务器购买

2.域名购买+ICP备案

3.将Vue项目打包

二、具体步骤

1.腾讯云进入宝塔

点击进入，然后按照如下操作顺序进行

复制登录旁边的这个指令

然后按下Ctrl+Shift+V，粘贴指令，按下回车

访问这个外网面板地址，username和password就是我们等下需要登录宝塔的用户名和密码，这个密码大家可留可不留，每次进入宝塔在腾讯云服务器复制这个指令即可

2.进入宝塔

        复制刚才的外网面板地址，输入用户名和密码

        然后会出现推荐一键安装套件，安装推荐的这个即可，后续需要把mysql换成8.0的，5.6的可能大家都没这么用了，当然我们部署纯前端项目，数据库版本的选择对我们影响不大。

然后按照如下图顺序进行操作

由于我们部署的是vue纯前端项目，因此不需要创建数据库

点击“确定”后，来到文件位置，如果刚才你没有自己勾选目录，那么你的文件会在

/www/wwwroot/（你的域名/IP+端口号）

由于我的网站已经部署，这边就不展示具体域名了，点击进入/www/wwwroot/（你的域名/IP+端口号）的文件夹，将vue项目打包好的dist目录放如/www/wwwroot/（你的域名/IP+端口号）中，

3.Vue打包

Vue项目怎么打包？有的兄弟有的，不论你是使用WebStorm，VS Code还是哪种前端开发工具

点击terminal，输入

npm run build
如果是vite+vue项目也可以使用
vite build

接下来就按照我标注的顺序操作，然后你就可以看到你dist目录的位置，将这个dist目录放到/www/wwwroot/（你的域名/IP+端口号）对应的文件夹下即可

也就是下面的效果

有时候我们会出现nginx 404 not found，回到网站模块，点击设置

在配置文件中添加

location /
{
    try_files $uri $uri/ /index.html;
}

添加后，无论我们怎样在页面刷新，或者下次访问就不会出现nginx 404 not found了，最后访问输入对应的域名或者（IP+端口号）我们就可以访问我们的网站了，恭喜你！你的网站就可以分享给你的小伙伴啦！

---

三、总结

        1.服务器，域名购买，ICP备案是前置条件

        2.Vue项目打包

        3.在宝塔部署Vue项目

温馨提示，如果你使用IP+端口号，或者域名+端口号部署项目，那么你就要在腾讯云和宝塔放行相应的端口

对于宝塔：按照如下图示即可放行我们的端口号了

在腾讯云也需要放行相应的端口，具体如下：