2024-08-08
温故知新
00
请注意,本文编写于 62 天前,最后修改于 62 天前,其中某些信息可能已经过时。

目录

简介
配置示例
解释:

简介

在使用 Nginx 时,如果你的 Vue.js 应用使用 history 模式了 Vue RouterNginx 需要进行一些特别的配置,以确保前端路由能正确处理而不会返回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 Routerhistory 模式可以正常工作,所有路由请求都会重定向到 index.html,从而由前端路由处理。
如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:DingDangDog

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!