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
相关文章
|
25天前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
33 3
|
1月前
|
JavaScript API
vue 批量自动引入并注册组件或路由等等
【10月更文挑战第12天】 vue 批量自动引入并注册组件或路由等等
|
1月前
|
JavaScript 前端开发 API
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
597 0
|
1月前
|
JavaScript 前端开发 UED
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
177 1
|
1月前
|
JavaScript 前端开发 UED
|
1月前
|
JavaScript 前端开发 API
前端技术分享:Vue.js 动态路由与守卫
【10月更文挑战第1天】前端技术分享:Vue.js 动态路由与守卫
|
1月前
|
资源调度 JavaScript UED
如何使用Vue.js实现单页应用的路由功能
【10月更文挑战第1天】如何使用Vue.js实现单页应用的路由功能
|
23天前
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
56 0
|
1月前
|
JavaScript API
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
37 0
|
1月前
|
JavaScript
Vue路由传参实战指南:三种常用方法示例演示
Vue路由传参实战指南:三种常用方法示例演示
87 0