42 lines
3.3 KiB
Markdown
42 lines
3.3 KiB
Markdown
---
|
||
title: 前端路由 history 模式刷新 404 的问题
|
||
date: 2020-04-13 18:05:23
|
||
tags:
|
||
- 前端
|
||
- 前端路由
|
||
categories:
|
||
- 前端
|
||
---
|
||
|
||
> 能在官方文档中找到答案的问题，都是我们自己没认真看文档的问题。
|
||
> <p align="right">——ZhouXY</p>
|
||
|
||
前段时间由于要做一个东西而接触了 Vue，这两天因为某些需要又开始接触 Angular，有那么一点点点点点的 Vue 的知识，看 Angular 的基础其实不算太吃力。
|
||
|
||
## 问题描述
|
||
今天学习的过程中用到了路由，在开发环境中执行 `ng serve`，然后在浏览器上访问 `http://localhost:4200/test`，跑起来一切正常，但当我执行 `ng build` 进行构建并把它部署到 Nginx 中的时候就出事了。像 `http://example.com/test` 这种***深链接***，一刷新就 `404`。
|
||
|
||
上网找了一圈，几乎所有的博客、文章教程都是教怎么把路由改成 hash 模式的。我就纳闷了，路由提供了 history 模式，就用都不能用了？~~重点是，我真心觉得带`#`的地址好难看！~~ 在网上找了半天才反应过来我居然把最重要的官方文档给忘了……~~被自己蠢哭了 T^T~~
|
||
|
||
## 怎么解决
|
||
官方文档讲的很清楚：
|
||
> ### 带路由的应用必须以 index.html 作为后备页面
|
||
> Angular 应用很适合用简单的静态 HTML 服务器提供服务。 你不需要服务端引擎来动态合成应用页面，因为 Angular 会在客户端完成这件事。
|
||
>
|
||
> 如果该应用使用 Angular 路由器，你就必须配置服务器，让它对不存在的文件返回应用的宿主页(index.html)。
|
||
>
|
||
> 带路由的应用应该支持“深链接”。 所谓深链接就是指一个 URL，它用于指定到应用内某个组件的路径。 比如，http://www.mysite.com/heroes/42 就是一个到英雄详情页面的深链接，用于显示 id: 42 的英雄。
|
||
>
|
||
> 当用户从运行中的客户端应用导航到这个 URL 时，这没问题。 Angular 路由器会拦截这个 URL，并且把它路由到正确的页面。
|
||
>
|
||
> 但是，当从邮件中点击链接或在浏览器地址栏中输入它或仅仅在英雄详情页刷新下浏览器时，所有这些操作都是由浏览器本身处理的，在应用的控制范围之外。 浏览器会直接向服务器请求那个 URL，路由器没机会插手。
|
||
>
|
||
> 静态服务器会在收到对 http://www.mysite.com/ 的请求时返回 index.html，但是会拒绝对 http://www.mysite.com/heroes/42 的请求， 并返回一个 404 - Not Found 错误，除非，它被配置成了返回 index.html。
|
||
|
||
具体不同的服务器改怎么配置，点击链接直接看[官方文档](https://angular.cn/guide/deployment#server-configuration)吧。
|
||
|
||
我记得之前学 Vue 的时候，Vue 的[官方文档](https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90)也提到了这一点，只不过当时我用的是 hash 模式，这次遇到这种问题没第一时间反应过来。~~再一次被自己蠢哭了。~~
|
||
|
||
---
|
||
## 后记
|
||
官方文档永远都是最权威最完整的资料，能在官方文档中找到答案的问题，都是我们自己没认真看文档的问题。开发过程中一定要重视官方文档，可以省下去百度到处被误导的时间。 |