Quartz 4

部署 Vite 构建的 dist 文件夹：详细指南

4 min read

部署 Vite 构建的 dist 文件夹：详细指南

Vite 是一个轻量级且快速的前端构建工具，能够生成高效的静态文件。当你仅有 Vite 构建生成的 dist 文件夹时，可以将其部署到静态文件服务器上，以下是几种常见的方法。

目录

  1. 使用 serve 包
  2. 使用 Node.js 和 Express
  3. 部署到静态托管服务
    • Vercel
    • Netlify
  4. 使用 Nginx

1. 使用 serve 包

serve 是一个简单的命令行静态文件服务器，可以快速本地运行你的 dist 文件。这个方法非常适合用于本地开发和测试。

步骤

  1. 安装 serve：

    npm install -g serve

  2. 运行 dist 文件夹：

    serve -s dist

    这将在默认端口（5000）上启动服务器，你可以通过 http://localhost:5000 访问项目。

  3. 指定运行端口：

    你可以在启动命令中指定端口。例如，指定端口为 3131：

    serve -s dist -l 3131

2. 使用 Node.js 和 Express

使用 Node.js 和 Express 创建一个简单的静态文件服务器，可以让你更灵活地配置和扩展功能。

步骤

  1. 创建一个新的文件夹，然后进入该文件夹：

    mkdir my-static-server
cd my-static-server

  2. 初始化一个新的 Node.js 项目：

    npm init -y

  3. 安装 Express：

    npm install express

  4. 创建一个 server.js 文件，内容如下：

    const express = require('express');
const path = require('path');
 
const app = express();
const port = 3000;
 
// 设置静态文件夹
app.use(express.static(path.join(__dirname, 'dist')));
 
// 所有请求都重定向到 index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});
 
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

  5. 将你的 dist 文件夹复制到 my-static-server 目录下。

  6. 运行服务器：

    node server.js

    你可以通过 http://localhost:3000 访问项目。

3. 部署到静态托管服务

Vercel

  1. 安装 Vercel CLI：

    npm install -g vercel

  2. 部署项目：

    vercel

  3. 按提示进行配置，Vercel 会将你的项目部署并提供一个 URL。

Netlify

  1. 创建一个 Netlify 账户，并在 Netlify 网站上创建一个新站点。

  2. 将 dist 文件夹上传到 Netlify。

  3. 按照 Netlify 提示完成配置，Netlify 会为你生成一个 URL。

4. 使用 Nginx

Nginx 是一个高性能的 HTTP 和反向代理服务器，适合用来部署静态文件。

步骤

  1. 安装 Nginx。

  2. 配置 Nginx，将 dist 文件夹作为静态文件目录。编辑 Nginx 配置文件（通常位于 /etc/nginx/sites-available/default 或类似路径）：

    server {
    listen 80;
    server_name your_domain_or_ip;
 
    root /path/to/your/dist;
    index index.html;
 
    location / {
        try_files $uri $uri/ /index.html;
    }
}

  3. 重启 Nginx：

    sudo systemctl restart nginx

通过以上几种方法，你可以轻松地将 Vite 构建生成的 dist 文件夹内容运行起来，并在浏览器中访问你的项目。选择适合你的方案，快速部署并运行你的静态网站。

Graph View