vite+Vue3项目部署到 Nginx详解

VUE3项目部署到 Nginx 时，Vite 项目的 base 配置项非常关键，因为它决定了生成的静态资源路径。通常情况下，Vite 构建后的项目会输出到一个 dist 目录，你需要将这个目录部署到 Nginx 的特定路径下。通过正确设置 base，可以确保在 Nginx 上的路径能够正确加载资源。

假设你已经在本地使用 Vite 构建了 Vue 3 项目，并且你要将其部署到 Nginx 上。以下是详细步骤和注意事项。

1. 配置 vite.config.ts 中的 base

Nginx 通常会将项目部署在某个子路径下，而不是根目录。因此，你需要根据 Nginx 的配置设置 Vite 的 base 配置项。

假设：

• Nginx 配置了虚拟主机，将 Vue 3 项目部署在 http://your-domain.com/project/ 下。

你需要在 vite.config.ts 中设置 base 为 /project/，以确保生成的路径正确。

示例：

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  base: '/project/',  // 设置为你在 Nginx 中配置的路径
});

2. Nginx 配置

在 Nginx 中，你需要将 Vite 构建后的文件指向某个虚拟主机路径。例如，假设你将构建后的文件部署到 /var/www/html/project/ 目录。

Nginx 配置文件示例：

假设你在 Nginx 中配置了一个虚拟主机来服务你的项目，配置文件可能如下：

server {
    listen 80;
    server_name your-domain.com;

    # 配置静态资源的根目录
    location /project/ {
        root /var/www/html;  # 假设构建后的文件在这个目录下
        try_files $uri $uri/ /project/index.html;
    }

    # 如果你使用了 HTTPS
    # listen 443 ssl;
    # ssl_certificate /etc/nginx/ssl/your-cert.pem;
    # ssl_certificate_key /etc/nginx/ssl/your-key.pem;
}

• location /project/：表示访问路径 /project/ 时，Nginx 会去 /var/www/html 下查找文件。
• root /var/www/html;：指定静态文件的根目录，这里是构建输出的文件目录。
• try_files $uri $uri/ /project/index.html;：这是确保 Vue Router 等单页面应用能正确处理路由的配置。它会尝试访问请求的路径，如果文件不存在，就返回 index.html，让前端路由来处理。

3. 构建项目

在设置好 vite.config.ts 的 base 配置后，你可以使用 Vite 构建项目：

npm run build

构建后的文件会输出到 dist 目录。你需要将这些文件上传到 Nginx 配置的目录，例如 /var/www/html/project/。

4. 部署到 Nginx

将 dist 目录中的文件复制到 Nginx 的根目录：

cp -r dist/* /var/www/html/project/

5. 重启 Nginx

最后，重启 Nginx 使配置生效：

sudo nginx -s reload

6. 访问项目

完成上述步骤后，你应该可以通过 http://your-domain.com/project/ 访问你的 Vue 3 项目。

7. 注意事项

• 路径问题：确保 base 配置项和 Nginx 配置的路径一致。如果你将 Vue 项目部署到 /project/ 下，base 必须设置为 /project/，否则静态资源无法正确加载。
• 历史模式路由：如果你使用的是 Vue Router 的历史模式，确保在 Nginx 中使用 try_files 指令来回退到 index.html，避免刷新页面时出现 404 错误。
• 静态资源优化：可以考虑通过 Nginx 配置缓存策略，提高静态资源的加载速度。

完整配置示例

vite.config.ts:

import { defineConfig } from 'vite';

export default defineConfig({
  base: '/project/',  // 设置为项目的部署路径
});

Nginx 配置：

server {
    listen 80;
    server_name your-domain.com;

    location /project/ {
        root /var/www/html;
        try_files $uri $uri/ /project/index.html;  # Vue Router 处理前端路由
    }
}

构建命令：

npm run build

将构建后的文件复制到 Nginx 目录：

cp -r dist/* /var/www/html/project/

通过这种方式，你可以确保在 Nginx 上正确部署和访问基于 Vite 和 Vue 3 构建的项目。