VUE前端项目打包部署云服务器详细流程(宝塔)

项目背景与部署流程

前端框架采用Vue3 + TypeScript，打包输出目录为dist，部署目标为腾讯云轻量服务器（OpenCloudOS），使用宝塔面板管理网站，Nginx托管静态文件，安全组开放必要端口。

本地开发环境准备

确保项目已正确打包，在本地项目根目录运行以下命令生成dist文件夹：

npm run build

生成在项目根目录

上传dist到服务器

方法一：使用SCP命令上传

1. 本地命令行切换到dist所在目录（项目根目录）

1. 执行上传命令：

scp -r dist root@159.75.243.81:/usr/share/nginx/html/my-site

1. 若路径不存在，先登录服务器创建目录：

ssh root@159.75.243.81
mkdir -p /usr/share/nginx/html/my-site
exit

本人对服务器不太了解熟悉，所以安装宝塔

宝塔面板安装

服务器终端执行以下命令安装宝塔面板：

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

安装完成后会输出登录地址、用户名和密码，例如：

外网面板地址: https://159.75.243.81:29515/xxxxxx
username: admin
password: xxxxxx

安全组规则配置

登录腾讯云控制台，进入【轻量服务器】→【防火墙】，添加以下入站规则：

80 和 22 是默认就有的 添加29515即可，应用我选择的自定义

宝塔面板部署网站

登录宝塔面板 浏览器访问：

https://159.75.243.81:29515/xxxxxx

以上的地址密码：参考你自己运行安装宝塔输出的显示结果

输入用户名和密码登录

根据提示注册或者绑定已有的宝塔账号

首次登陆

1. 修改管理员密码（重要）

• 左上角头像 → 修改密码 → 设置一个更安全的密码

2. 安装推荐环境（LNMP）

首页会提示你安装运行环境，选择安装：

• Nginx（Web服务器）
• MySQL（数据库）
• PHP（Vue项目可选，主要用于后端接口）
• phpMyAdmin（数据库管理工具）

点击【一键安装】，等待安装完成

添加站点

1. 点击左侧菜单【网站】→【添加站点】
2. 域名填写159.75.243.81或自定义域名------你自己云服务器的公网ip
3. 根目录自动创建为/www/wwwroot/159.75.243.81

上传并解压dist文件

1. 点击【文件】→【上传】
2. 将dist.zip上传至网站根目录
3. 右键解压文件

访问网站

浏览器打开以下地址即可访问部署好的Vue页面：

http://159.75.243.81

多个项目创建

为了区分不同的项目使用端口号区分【上面的操作默认使用的80端口】

在根目录下可创建多个文件夹作为不同项目的区分

在网站-添加站点的时候输入你的公网IP 在加上一个不同的端口号

添加好后，把你打包的文件夹解压，里面的文件放入上面创建的文件夹里面去

这样在我的project2文件夹里面放入vue打包后的产物

最后一步：在云服务器把你刚才添加的端口号的

🔒 补充建议：提高安全性

总结 

到此这篇关于VUE前端项目打包部署云服务器的文章就介绍到这了,更多相关VUE前端打包部署云服务器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论