返回

一键实现vben-admin项目在服务器（宝塔）上的部署

前端

前言

vben-admin 是一款基于 Vue 3 和 Vite 的中后台前端解决方案，它提供了丰富的组件和强大的功能，深受广大开发者的喜爱。为了让 vben-admin 项目能够在服务器上运行，我们需要对其进行打包并部署到服务器上。

一、打包 vben-admin 项目

在打包 vben-admin 项目之前，我们需要先确保已经安装了必要的依赖。

# 安装依赖
pnpm install

安装完成后，我们可以通过以下命令进行打包：

# 打包项目
pnpm preview

打包完成后，会在项目根目录下生成一个名为 dist 的文件夹，其中包含了打包后的项目文件。

二、将项目部署到服务器

将项目部署到服务器，我们可以使用多种方式，这里我们使用宝塔面板进行部署。

  1. 登录宝塔面板，点击 “软件商店” -> “全部软件”，搜索 “nginx” 并安装。

  2. 安装完成后，点击 “网站” -> “添加站点”，填写相关信息，包括域名、根目录等。

  3. 填写完成后，点击 “提交”，网站就创建成功了。

  4. 接下来的步骤就是如何将本地项目中的 dist 文件夹的内容上传到服务器，我们首先得获取服务器IP。
    由于我的宝塔面板使用的是 Ubuntu，所以使用命令行。然后我们将打包好的项目 dist 文件夹的所有文件上传至刚才确认的路径。

scp -r dist/* root@服务器IP地址:/www/wwwroot/vben-admin

# 上传文件到服务器
scp -r dist/* root@服务器IP地址:/www/wwwroot/项目根目录
  1. 上传完成后，我们需要修改 nginx 的配置文件，使其能够正确访问项目文件。
# 修改 nginx 配置文件
vi /etc/nginx/conf.d/项目根目录.conf

在配置文件中，找到如下内容：

server {
    listen 80;
    server_name 项目域名;
    root /www/wwwroot/项目根目录;

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

将 项目域名、项目根目录 修改为实际的域名和根目录，然后保存并退出配置文件。

  1. 重启 nginx 服务，使配置生效。
# 重启 nginx 服务
service nginx restart

至此，vben-admin 项目就已经成功部署到服务器上了。

三、结语

本文详细介绍了如何将 vben-admin 项目部署到服务器（宝塔面板），并使用 nginx 作为 web 服务器。通过这些步骤，你就可以轻松实现 vben-admin 在服务器上的运行，并将其上线使用。

四、注意事项

在部署 vben-admin 项目时，需要注意以下几点：

  • 确保已经安装了必要的依赖。
  • 打包项目时，需要使用 pnpm preview 命令。
  • 部署项目时，需要将 dist 文件夹的内容上传到服务器。
  • 修改 nginx 配置文件时，需要正确填写 项目域名 和 项目根目录。
  • 重启 nginx 服务，使配置生效。