vite+vue3项目通过宝塔部署到服务器？-云服务器

将一个使用 Vite + Vue 3 构建的前端项目通过宝塔面板部署到服务器，是一个常见且高效的部署方式。以下是详细步骤：

✅ 一、前提条件

服务器环境
- 已购买并登录 Linux 服务器（如阿里云、腾讯云等）
- 安装了 宝塔面板（建议最新版本）
本地开发环境
- 项目基于 Vite + Vue 3 开发完成
- 已测试构建无误：npm run build

✅ 二、本地操作：打包项目

在你的本地项目根目录执行：

npm run build

或

yarn build

这会生成一个 dist/ 目录，里面是静态文件（HTML、CSS、JS、图片等）。

💡 提示：确保 vite.config.js 中 build.outDir 是 dist（默认就是）。

✅ 三、上传 dist 文件夹到服务器

方法一：使用宝塔文件管理器上传

登录宝塔面板
进入「文件」功能
在网站根目录创建一个文件夹（例如：my-vue-project）
将本地 dist 文件夹中的所有文件 解压后上传 到该目录

⚠️ 注意：不要直接上传 dist 文件夹本身，而是上传里面的文件（即把 index.html 放在根目录）

方法二：使用 Git + 部署脚本（推荐用于团队或频繁更新）

在服务器安装 Git
克隆你的代码仓库
执行构建命令（需 Node.js 环境）

git clone your-repo-url
cd your-project
npm install --production=false
npm run build

然后把 dist/* 复制到网站目录。

✅ 四、宝塔中创建网站

宝塔面板 → 「网站」→ 「添加站点」
域名填写你的域名（如 www.example.com）
根目录设置为你存放 dist 文件的路径，例如：
```
/www/wwwroot/example.com
```
PHP 版本选择「纯静态」
其他保持默认，点击提交

✅ 五、配置 Nginx（关键！解决路由问题）

Vue 项目使用 vue-router 的 history 模式时，需要配置 Nginx，否则刷新页面会 404。

修改 Nginx 配置：

宝塔 → 网站 → 对应站点 → 「配置文件」
找到 location / 块，修改如下：

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

保存配置

✅ 这样当请求 /about 时，Nginx 会先尝试找文件，找不到就返回 index.html，由 Vue 路由处理。

✅ 六、开启 HTTPS（可选但推荐）

宝塔 → 网站 → SSL → 申请免费 Let’s Encrypt 证书
启用 HTTPS
强制 HTTPS（可勾选“强制HTTPS”）

✅ 七、访问网站

浏览器打开你的域名：

https://www.yourdomain.com

如果看到页面正常加载，说明部署成功！

✅ 补充建议

项目	建议
Node.js 环境	如果你想在服务器上构建，需安装 Node.js（宝塔软件商店有）
自动化部署	可结合 GitHub Actions + 服务器脚本自动拉取和构建
缓存问题	构建时启用文件哈希（Vite 默认开启），避免浏览器缓存旧文件
跨域问题	若前端调用后端 API，确保后端允许 CORS 或使用 Nginx 反向X_X

✅ 示例：完整 Nginx 配置片段

server {
    listen 80;
    server_name www.yourdomain.com;
    root /www/wwwroot/yourdomain.com;
    index index.html;

    gzip on;
    gzip_types text/plain application/javascript text/css;

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

    # 如果有 API 接口，可反向X_X
    location /api/ {
        proxy_pass http://127.0.0.1:3000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    error_page 404 /index.html;
}

✅ 总结流程图

本地开发 → npm run build → 得到 dist/
          ↓
上传 dist 内容到服务器网站目录
          ↓
宝塔创建网站，设根目录
          ↓
Nginx 配置 try_files 解决 history 路由
          ↓
开启 HTTPS（可选）
          ↓
访问域名，部署完成！

如有遇到具体错误（如白屏、404、资源加载失败），欢迎贴出问题，我可以帮你排查。

祝你部署顺利！🚀