admin 管理员组文章数量: 1086864
目录
前言
一、前置条件
二、具体步骤
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+端口号，或者域名+端口号部署项目，那么你就要在腾讯云和宝塔放行相应的端口
对于宝塔：按照如下图示即可放行我们的端口号了
在腾讯云也需要放行相应的端口，具体如下：
版权声明：本文标题：1.腾讯云服务器+宝塔面板部署Vue项目（纯前端） 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1747729278a2576476.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论