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

在使用 Vite + Vue3 项目部署到服务器时，通过 宝塔面板 是一种非常常见且简单的方式。下面是一个完整的部署流程，帮助你顺利将你的 Vite + Vue3 前端项目部署到服务器上。

🧰 准备工作

1. 确保本地项目可以正常打包

确保你的项目已经开发完成，并且可以通过以下命令成功打包：

npm run build

这会生成一个 dist/ 文件夹（默认输出目录），里面是编译后的静态资源文件。

✅ 提示：你可以查看 vite.config.js 中的 build.outDir 配置项确认输出路径，默认是 dist。

🚀 部署步骤（通过宝塔面板）

步骤 1：上传打包好的 dist 文件夹

1. 使用 FTP 或者直接压缩后上传：
   • 将本地的 dist 文件夹压缩成 .zip 文件。
2. 登录宝塔面板 → 文件管理 → 进入你网站的根目录（如 /www/wwwroot/yourdomain.com/）。
3. 把压缩包上传到该目录下并解压。

步骤 2：配置网站域名和运行环境

1. 宝塔面板 → 网站 → 添加站点（或已有站点点击设置）

   • 域名填写你的实际域名（例如 example.com）
   • 根目录选择你刚刚上传 dist 文件的路径（如 /www/wwwroot/example.com）
   • PHP版本选“纯静态”即可（因为是前端项目）
   • 其他保持默认即可

2. 确认伪静态规则（Vue Router history 模式需要）

如果你的 Vue3 项目使用了 vue-router 的 history 模式，必须配置 Nginx 重定向规则，否则刷新页面会报 404。

在宝塔中设置伪静态规则：

进入网站设置 → 伪静态 → 选择模板为 HTML 或自定义规则：

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

这样所有请求都会指向 index.html，Vue 路由就能正常工作。

步骤 3：配置 HTTPS（可选但推荐）

1. 在宝塔网站设置中，点击“SSL”选项卡。
2. 可以申请免费的 Let’s Encrypt 证书，开启强制 HTTPS。
3. 成功后你的网站就可以用 https:// 访问了。

🔁 自动化部署建议（进阶）

如果你希望每次提交代码后自动部署，可以考虑以下方式：

• 使用 GitHub Actions、GitLab CI 自动打包并上传到服务器。
• 或者在服务器安装 Git，通过 Webhook 实现自动化拉取和部署。

✅ 最终测试

打开浏览器访问你的域名，检查是否能正常加载页面，尤其是 Vue Router 的页面跳转是否正常。

📌 常见问题

示例 vite.config.js 配置（解决相对路径问题）：

export default defineConfig({
  plugins: [vue()],
  base: process.env.VITE_BASE_PATH || '/', // 可以动态配置
  build: {
    outDir: 'dist'
  }
})

📦 总结

如果你提供具体的项目结构或遇到的问题，我可以进一步帮你分析和解决 😄

是否还需要我帮你写一份一键部署脚本？