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

在使用 Vite + Vue3 项目部署到服务器时，如果你使用的是 宝塔面板（一款常用的 Linux 面板），可以按照以下步骤进行部署。整个流程包括：本地打包、上传文件、配置 Nginx 和域名绑定等。

✅ 前提条件

• 你有一个已经开发完成的 Vite + Vue3 项目
• 你有一台安装了 宝塔面板 的服务器（Linux 系统）
• 已经在宝塔中安装好 Nginx 或 Apache
• 已经备案好的域名（可选）

🚀 步骤一：本地打包项目

1. 在你的 Vite + Vue3 项目根目录下执行：

npm run build

这会生成一个 dist/ 文件夹，里面是编译后的静态资源。

如果你没有配置打包路径，默认输出目录是 dist，可在 vite.config.js 中修改 build.outDir 来指定输出路径。

📁 步骤二：将 dist 文件夹上传到服务器

方法一：通过 FTP/SFTP 上传

1. 使用 FTP 客户端（如 FileZilla）连接服务器。
2. 将本地的 dist 文件夹内容上传到宝塔网站目录，例如：

   /www/wwwroot/yourdomain.com/

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

1. 登录宝塔面板。
2. 进入【网站】 → 【站点设置】 → 【网站目录】。
3. 打开对应站点的根目录（默认 /www/wwwroot/yourdomain.com）。
4. 点击右上角的【上传】按钮，上传压缩包（推荐先压缩成 .zip 格式）。
5. 上传完成后解压即可。

🧩 步骤三：配置 Nginx

1. 在宝塔面板中点击你的网站 → 【设置】 → 【网站配置】 → 【Nginx 配置】。
2. 修改配置文件，确保能正确访问静态资源。以下是常见配置示例：

server {
    listen 80;
    server_name yourdomain.com; # 替换为你的域名

    root /www/wwwroot/yourdomain.com/dist; # 注意这里指向 dist 目录
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }

    # 如果是 history 模式的路由，需要添加如下配置
    location / {
        try_files $uri $uri/ /index.html;
    }
}

⚠️ 注意：

• 路径要根据你实际上传的位置填写
• 如果你使用的是 Vue Router 的 history 模式，必须加上 try_files $uri $uri/ /index.html; 否则页面刷新会 404

保存后重启 Nginx。

🔗 步骤四：绑定域名 & 解析 DNS

1. 在宝塔中进入【网站】 → 【添加站点】，填写你的域名。
2. 在域名服务商后台（如阿里云、腾讯云等）添加 A 记录，解析到你的服务器 IP。
3. 等待 DNS 生效后，通过浏览器访问你的网站。

🧪 步骤五：测试访问

打开浏览器，输入你的域名，查看是否正常显示 Vue3 页面。

如果出现白屏或 404，请检查以下几点：

• 是否配置了正确的静态资源路径（Nginx root 指向 dist）
• 是否开启了 history 模式但未配置 URL 回退
• 浏览器控制台是否有报错信息（F12 查看 Network）

🧱 可选优化项

• 开启 HTTPS（宝塔支持一键申请 SSL 证书）
• 设置 Gzip 压缩提升加载速度
• 添加 404 页面处理
• 配置缓存策略（Cache-Control）

📝 示例 vite.config.js（可选）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'dist', // 默认就是 dist
    assetsDir: 'assets' // 静态资源存放目录
  }
})

✅ 总结

如果你还有问题，比如使用了 Node.js 接口、需要前后端同域X_X、或者想用 Docker 部署，也可以继续问我！