pzg's blog

以下是使用 Nginx 来配置路由规则，使得 Vue 应用在打包后输入带有路由路径的 URL 能够正确显示的步骤：

解决思路

1. 配置 Nginx 以处理 Vue 应用的路由重定向。
2. 确保所有的请求都被重定向到 index.html 文件，以便 Vue 的路由可以处理它们。

配置文件示例

收起

nginx

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        root /path/to/your/vue/app/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

代码解释：

• listen 80;：Nginx 监听的端口，这里是 80 端口。
• server_name yourdomain.com;：服务器的域名，你需要将 yourdomain.com 替换为你的实际域名。
• location / {... }：这是一个 Nginx 的位置块，用于处理根路径 / 的请求。
• root /path/to/your/vue/app/dist;：指定 Vue 应用的根目录，这里是 Vue 应用打包后的目录。
• index index.html;：设置默认的首页文件为 index.html。
• try_files $uri $uri/ /index.html;：这个指令是关键。当用户请求一个文件时，Nginx 首先尝试查找 $uri 对应的文件，如果文件不存在，它会尝试查找 $uri/ 目录下的文件，如果还是不存在，它将请求重定向到 index.html。这样，对于 Vue 应用中的路由，当用户输入完整的路由路径时，Nginx 会将请求重定向到 index.html，让 Vue 的路由系统接管，从而避免 404 错误。

详细步骤

1. 打开 Nginx 的配置文件，通常位于 /etc/nginx/nginx.conf 或 /etc/nginx/conf.d/default.conf。
2. 将上述代码添加到 server 块中，根据你的实际情况修改 server_name 和 root 的值。
3. 保存配置文件。
4. 检查配置文件是否正确：sudo nginx -t。
5. 重新加载 Nginx 配置：sudo nginx -s reload。

注意事项

• 确保 /path/to/your/vue/app/dist 是你 Vue 应用打包后的实际目录。
• 确保你已经正确安装和启动了 Nginx。
• 如果你的 Vue 应用使用的是子路径，比如 /app，你可以将 location / 改为 location /app {... }，并相应地调整 root 路径和 try_files 指令。

这样，当用户输入带有路由路径的 URL 时，Nginx 会将请求转发到 Vue 应用的 index.html，Vue 的路由系统会根据路由路径显示相应的内容，避免了 404 错误。