腾讯云服务器+宝塔面板部署Vue3项目超详细教程

如果突然消失

2808人浏览 · 2025-03-05 18:44:07

如果突然消失 · 2025-03-05 18:44:07 发布

腾讯云服务器+宝塔面板部署Vue3项目超详细教程

emmm……有点长但是超详细

1. 腾讯云服务器购买与配置

1.1 服务器购买步骤

访问腾讯云官网(cloud.tencent.com)并登录
选择【云服务器】产品
选择配置：
- 地域：建议选择距离用户较近的地区
- 机型：轻量应用服务器或普通云服务器(CVM)
- 配置：建议2核4G以上
- 带宽：5M起步
- 系统：CentOS 7.6 或 Ubuntu 20.04

具体配置推荐：

实例规格：2核4G
系统盘：60G SSD云硬盘
带宽：5Mbps
操作系统：CentOS 7.6 64位

1.2 安全组配置

进入腾讯云控制台
找到【安全组】配置
添加以下端口：

22端口：SSH远程连接
80端口：HTTP服务
443端口：HTTPS服务
8888端口：宝塔面板
3306端口：MySQL(可选)

具体步骤：

点击【新建安全组】
填写名称和描述
添加入站规则：

协议：TCP
端口：22,80,443,8888,3306
来源：0.0.0.0/0
策略：允许

1.3 服务器初始化

重置root密码：
- 在控制台选择【重置密码】
- 设置一个强密码（建议包含大小写字母、数字和特殊字符）
远程连接服务器：

Windows用户：

# 使用PowerShell或CMD
ssh root@你的服务器IP

# 或使用XShell、PuTTY等工具连接
主机：服务器IP
用户名：root
密码：之前设置的密码
端口：22

Mac/Linux用户：

ssh root@你的服务器IP

更新系统包：

CentOS系统：

# 更新包管理器
yum update -y

# 安装常用工具
yum install -y wget vim net-tools

Ubuntu系统：

# 更新包管理器
apt update && apt upgrade -y

# 安装常用工具
apt install -y wget vim net-tools

2. 宝塔面板安装与设置

2.1 安装宝塔面板

CentOS系统安装命令：

# 使用root用户执行
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

Ubuntu系统安装命令：

wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh

安装完成后会显示以下信息（务必保存）：

外网面板地址: http://服务器IP:8888/xxxxxxxx
内网面板地址: http://服务器内网IP:8888/xxxxxxxx
username: xxxxxxxx
password: xxxxxxxx

2.2 首次登录配置

使用浏览器访问面板地址
输入用户名和密码登录
首次登录可能需要绑定宝塔账号
进入面板后的初始化设置：
- 选择推荐安装套件
- 设置后台入口
- 修改默认用户名密码

2.3 安全设置

修改面板端口：
- 进入【面板设置】
- 修改面板端口（建议改为非常用端口）
- 保存并重启面板
设置访问限制：
- 开启【密码访问】
- 设置【允许IP】
- 开启【绑定域名】（如果有）
设置防火墙：

# 在面板中开启防火墙
# 添加放行端口：
80,443,8888(面板端口),3306(数据库端口),22(SSH端口)

3. 环境配置

3.1 安装LNMP环境

在宝塔面板中安装必要软件：
- 点击【软件商店】
- 搜索并安装以下软件：
```
Nginx 1.18+ (推荐1.20)
MySQL 5.7+
PHP 7.4+
```
Nginx配置优化：
- 点击【配置修改】
- 添加以下配置到http块：

# http块内添加以下配置
client_max_body_size 50m;
client_body_buffer_size 256k;
client_header_timeout 3m;
client_body_timeout 3m;
proxy_connect_timeout 300s;
proxy_read_timeout 300s;
proxy_send_timeout 300s;
proxy_buffer_size 64k;
proxy_buffers 4 32k;
proxy_busy_buffers_size 64k;
proxy_temp_file_write_size 64k;
proxy_ignore_client_abort on;

3.2 安装Node.js环境

使用nvm安装Node.js：

# 安装nvm
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 重新加载配置
source ~/.bashrc

# 安装Node.js 16版本
nvm install 16

# 设置默认版本
nvm alias default 16

# 验证安装
node -v
npm -v

安装全局工具：

# 安装pm2
npm install -g pm2

# 安装pnpm（可选）
npm install -g pnpm

# 安装yarn（可选）
npm install -g yarn

3.3 配置Git（可选）

安装Git：

# CentOS
yum install git -y

# Ubuntu
apt install git -y

配置Git：

git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

4. Vue3项目部署

4.1 项目打包准备

本地项目配置：

// vite.config.js
export default defineConfig({
  build: {
    // 生产环境移除console
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
    // 关闭生成map文件
    sourcemap: false,
    // 打包输出目录
    outDir: 'dist',
  },
})

环境变量配置：

# .env.production
VITE_API_BASE_URL=https://api.yourdomain.com

执行打包：

# npm
npm run build

# yarn
yarn build

# pnpm
pnpm build

4.2 上传项目文件

创建网站目录：
- 在宝塔面板点击【网站】
- 点击【添加站点】
- 填写以下信息：
```
域名：你的域名
根目录：/www/wwwroot/你的域名
PHP版本：纯静态
```

上传文件：

方法一：宝塔面板上传

1. 进入网站根目录
2. 点击上传
3. 选择本地dist目录所有文件

方法二：使用FTP工具

主机：服务器IP
用户名：root
密码：服务器密码
端口：21或22(SFTP)

4.3 配置Nginx

基础配置：

server {
    listen 80;
    server_name your-domain.com;  # 替换为你的域名
    root /www/wwwroot/your-domain.com;
    index index.html index.htm;
    
    # 支持history路由模式
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # 静态资源缓存
    location /assets {
        expires 7d;
        add_header Cache-Control "public, no-transform";
    }
    
    # 图片缓存
    location ~* \.(jpg|jpeg|png|gif|ico|webp)$ {
        expires 30d;
        add_header Cache-Control "public, no-transform";
    }
    
    # gzip压缩
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 6;
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
    gzip_vary on;
    gzip_proxied any;
}

配置API代理（如果需要）：

# 在server块内添加
location /api {
    proxy_pass http://backend-api.com;  # 后端API地址
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    
    # 跨域配置
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers '*';
    add_header Access-Control-Expose-Headers '*';
    
    if ($request_method = 'OPTIONS') {
        return 204;
    }
}

5. 域名解析与SSL证书

5.1 域名解析配置

添加域名解析：

登录域名服务商控制台
找到域名解析设置

添加以下记录：

记录类型：A记录
主机记录：@（根域名）或www（二级域名）
记录值：服务器IP地址
TTL：600秒

验证解析：

# 使用ping命令验证
ping your-domain.com

# 使用nslookup验证
nslookup your-domain.com

5.2 SSL证书申请与安装

免费证书申请：
- 在宝塔面板中点击【SSL】
- 选择【Let’s Encrypt】
- 填写邮箱
- 选择需要申请证书的域名
- 点击申请
手动上传证书：
- 点击【SSL】
- 选择【其他证书】
- 粘贴证书内容：
```
证书文件：填写.pem文件内容
私钥文件：填写.key文件内容
```
SSL配置：

server {
    listen 443 ssl http2;
    server_name your-domain.com;
    
    ssl_certificate    /www/server/panel/vhost/cert/your-domain.com/fullchain.pem;
    ssl_certificate_key    /www/server/panel/vhost/cert/your-domain.com/privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;
    
    root /www/wwwroot/your-domain.com;
    index index.html index.htm;
    
    # 其他配置保持不变...
}

# HTTP重定向HTTPS
server {
    listen 80;
    server_name your-domain.com;
    return 301 https://$server_name$request_uri;
}

6. 性能优化

6.1 前端优化

路由懒加载：

// router/index.js
const routes = [
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

图片懒加载：

// main.js
import VueLazyload from 'vue-lazyload'

app.use(VueLazyload, {
  preLoad: 1.3,
  error: 'error.png',
  loading: 'loading.gif',
  attempt: 1
})

组件按需引入：

// 以Element Plus为例
import { createApp } from 'vue'
import { Button, Table } from 'element-plus'

const app = createApp(App)
app.use(Button)
app.use(Table)

6.2 服务器优化

内存优化：

# 编辑系统配置
vim /etc/sysctl.conf

# 添加以下内容
net.ipv4.tcp_fin_timeout = 30
net.ipv4.tcp_keepalive_time = 1200
net.ipv4.tcp_max_syn_backlog = 8192
net.ipv4.tcp_tw_reuse = 1

Nginx优化：

# nginx.conf
worker_processes auto;
worker_rlimit_nofile 65535;

events {
    worker_connections 65535;
    multi_accept on;
    use epoll;
}

http {
    # 开启压缩
    gzip on;
    gzip_comp_level 6;
    gzip_min_length 1k;
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
    gzip_vary on;
    
    # 缓存设置
    open_file_cache max=65535 inactive=60s;
    open_file_cache_valid 80s;
    open_file_cache_min_uses 1;
    
    # 客户端配置
    client_max_body_size 50m;
    client_body_buffer_size 256k;
    client_header_timeout 3m;
    client_body_timeout 3m;
    
    # 代理设置
    proxy_connect_timeout 300s;
    proxy_read_timeout 300s;
    proxy_send_timeout 300s;
    proxy_buffer_size 64k;
    proxy_buffers 4 32k;
    proxy_busy_buffers_size 64k;
    proxy_temp_file_write_size 64k;
    proxy_ignore_client_abort on;
}

7. 常见问题解决

7.1 跨域问题

前端配置：

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://backend-api.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

Nginx配置：

location /api {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers '*';
    add_header Access-Control-Expose-Headers '*';
    
    if ($request_method = 'OPTIONS') {
        return 204;
    }
    
    proxy_pass http://backend-api.com;
}

7.2 部署后刷新404

Nginx配置：

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

7.3 性能监控

安装监控工具：

# 安装网站监控工具
npm install -g @vue/cli-service
vue add performance

PM2监控：

# 启动应用并监控
pm2 start app.js --name "vue-app" --watch

# 查看监控面板
pm2 monit

# 查看日志
pm2 logs

维护建议

定期备份：

# 备份网站文件
tar -zcvf website-backup-$(date +%Y%m%d).tar.gz /www/wwwroot/your-domain.com

# 备份数据库
mysqldump -u root -p database_name > backup-$(date +%Y%m%d).sql

日志管理：

# 查看Nginx错误日志
tail -f /www/wwwlogs/nginx_error.log

# 查看站点访问日志
tail -f /www/wwwlogs/your-domain.com.log

安全维护：
- 定期更新系统包
- 更新面板和插件
- 检查安全日志
- 配置防火墙规则

总结

成功部署Vue3项目需要注意：

服务器配置要合理
环境安装要完整
Nginx配置要正确
SSL证书要及时更新
性能优化要到位
安全防护要做好

参考资料

本教程详细介绍了在腾讯云服务器上使用宝塔面板部署Vue3项目的完整流程。如有问题，欢迎在评论区讨论。

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

小参数・大码力・易部署 | Qwen3.6-27B上线魔乐社区，基于昇腾的部署教程来了

继一周前模型开源发布后，千问再度开源Qwen3.6-27B —— 一个拥有270亿参数的稠密多模态模型，也是社区呼声最高的模型规格。Qwen3.6-27B 依然支持多模态思考与非思考模式，在智能体编程方面达到了旗舰级表现，全面超越前代开源旗舰 Qwen3.5-397B-A17B（总参数397B / 激活参数17B的MoE模型）。作为稠密架构，它无需MoE路由即可部署，是开发者在实用、可广泛部署规模