简介

在使用 Nginx 时，如果你的 Vue.js 应用使用 history 模式了 Vue Router，Nginx 需要进行一些特别的配置，以确保前端路由能正确处理而不会返回404错误。

配置示例

下面是一个基本的配置示例，假设你的应用已经构建到 /var/www/html/my-app 目录：

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

    root /var/www/html/my-app;  # 替换为你的应用构建目录
    index index.html;

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

    # 可选：配置日志文件
    access_log /var/log/nginx/my-app_access.log;
    error_log /var/log/nginx/my-app_error.log;
}

解释：

• root /var/www/html/my-app;：设置你的应用目录。
• try_files $uri $uri/ /index.html;：尝试查找请求的文件或目录，如果找不到，则返回 index.html。这保证了 Vue Router 的 history 模式可以正常工作，所有路由请求都会重定向到 index.html，从而由前端路由处理。