Vue 发布服务器(Nginx)后访问路由报错 404

简介: Vue 发布服务器(Nginx)后访问路由报错 404
server {
    # 监听端口
    listen 8089;
    # 主机名称
    server_name www.dzm.com;
    # 根目录
    root /usr/local/var/dzm;
    # 匹配协议
    # location / {
    #     index index.html;
    # }
    # 上面 / 的匹配协议换成这个
    location / {
        try_files $uri $uri/ /index.html;
    }
    location /api/ {
        proxy_pass http://api-test/;
    }
}
// 将这个匹配换成下面的
location / {
    index index.html;
}
// 将上面的匹配换成这个
location / {
    try_files $uri $uri/ /index.html;
}
  • nginxtry_files 的的作用一般用户 url 的美化,或者是伪静态功能:
  • 当用户请求 http://localhost/example 时,这里的 $uri 就是 /example
  • try_files 会到硬盘里尝试找这个文件。如果存在名为 /root/example(其中 root 是项目代码安装目录)的文件,就直接把这个文件的内容发送给用户。
  • 显然,目录中没有叫 example 的文件。然后就看 uri/,增加了一个 /,也就是看有没有名为 /root/example/ 的目录。
  • 又找不到,就会 fall backtry_files 的最后一个选项 /index.html,发起一个内部 “子请求”,也就是相当于 nginx 发起一个 HTTP 请求到 http://localhost/index.html
相关文章
|
11天前
|
JavaScript
【vue】如何跳转路由到指定页面位置
【vue】如何跳转路由到指定页面位置
14 0
|
10天前
|
JavaScript 数据可视化 算法
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
31 6
|
4天前
|
Java
如何解决使用若依前后端分离打包部署到服务器上后主包无法找到从包中的文件的问题?如何在 Java 代码中访问 jar 包中的资源文件?
如何解决使用若依前后端分离打包部署到服务器上后主包无法找到从包中的文件的问题?如何在 Java 代码中访问 jar 包中的资源文件?
19 0
|
7天前
|
资源调度 JavaScript 前端开发
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
|
7天前
|
JavaScript Go
Vue路由跳转及路由传参
Vue路由跳转及路由传参
|
7天前
|
弹性计算 Shell Apache
某时间段访问apache 服务器的请求IP
【4月更文挑战第29天】
12 2
|
7天前
|
弹性计算 Shell Apache
|
11天前
|
JavaScript 前端开发
vue3+ts+element home页面侧边栏+头部组件+路由组件组合页面教程
这是一个Vue.js组件代码示例,展示了带有侧边栏导航和面包屑导航的布局。模板中使用Element Plus组件库,包含可折叠的侧边栏,其中左侧有 Logo 和导航列表,右侧显示更具体的子菜单。`asideDisplay`控制侧边栏宽度。在`script`部分,使用Vue的响应式数据和生命周期钩子初始化路由相关数据,并从localStorage恢复状态。样式部分定义了组件的颜色、尺寸和布局。
17 1
|
12天前
|
缓存 JavaScript 前端开发
Vue.js 路由时用于提高应用程序性能
Vue.js 路由时用于提高应用程序性能
|
7天前
|
JavaScript
【vue】深入探讨vue中组件间多种传值方式
【vue】深入探讨vue中组件间多种传值方式
【vue】深入探讨vue中组件间多种传值方式