nginx 配置vue

# Nginx 配置 Vue 应用的示例

server {
    listen 80;
    server_name yourdomain.com;

    # 根目录指向 Vue 项目的 dist 文件夹
    root /path/to/your/vue/dist;
    index index.html;

    # 配置 location 块以支持 HTML5 History 模式
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 可选：配置静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
        expires max;
        log_not_found off;
    }
}

解释说明：

1. listen 80;: 监听 80 端口，表示 Nginx 将在该端口上监听 HTTP 请求。
2. server_name yourdomain.com;: 设置服务器的域名，替换为你的实际域名。
3. root /path/to/your/vue/dist;: 设置 Vue 项目的 dist 文件夹路径，这是构建后的静态文件存放位置。
4. index index.html;: 设置默认索引文件为 index.html。
5. location / { try_files $uri $uri/ /index.html; }: 这个配置是为了支持 Vue Router 的 HTML5 History 模式。当用户访问一个路径时，Nginx 会尝试匹配文件或目录，如果找不到，则返回 index.html，从而让 Vue 路由器处理这些路径。
6. *location ~ .(js|css|png|jpg|jpeg|gif|ico)$ { ... }**: 对静态资源（如 JavaScript、CSS、图片等）进行缓存设置，提高性能。

如果有任何问题或需要进一步调整，请根据实际情况修改配置。