Vue-ErrorPage-Simple-01/README.md

Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Learn more about IDE Support for Vue in the Vue Docs Scaling up Guide.

Project NodeJS Version: v20.18.3

Run dev commands:

npm run dev

Run build commands:

npm run build

对于Nginx服务器需要添加以下配置：

找到你站点 Nginx 配置文件（通常在 /etc/nginx/conf.d/xxx.conf 或 /etc/nginx/sites-available/xxx），在 location / 块中添加 try_files：

server {
    listen 80;
    server_name your-domain.com;
    root /你的部署目录/dist;  # 指向你构建产物的目录
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;  # 关键配置
    }

    # 静态资源缓存（可选，提升性能）
    location /assets/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

核心就是这一行：

try_files $uri $uri/ /index.html;

它的含义是：

1. 先尝试查找请求的文件（$uri）
2. 再尝试查找请求的目录（$uri/）
3. 都找不到就返回 index.html，让 Vue Router 接管路由

生效步骤

修改完配置后，执行：

# 检查配置语法是否正确
nginx -t

# 重新加载配置（无需重启）
nginx -s reload

配置生效后，直接访问 /help 就不会再 404 了。