Vue 进阶面试题, Vue 项目部署到服务器后,报 404 错误的原因是什么?
Vue 进阶面试题, Vue 项目部署到服务器后,报 404 错误的原因是什么?
QA
Step 1
Q:: Vue 项目部署到服务器后，报 404 错误的原因是什么？
A:: 当 Vue 项目部署到服务器后，报 404 错误的原因通常是由于前端路由与服务器端的配置不匹配所导致的。Vue 项目通常使用基于 history 模式的路由，而这种模式下，路由会依赖浏览器的 history API 来进行导航。当用户直接访问特定路由时，服务器可能没有正确配置，以致于找不到相应的文件，从而导致 404 错误。解决方法是需要在服务器上配置，将所有路由都重定向到 index.html，从而使得 Vue 的路由能正常解析。例如，在 Nginx 中，可以通过配置 try_files $uri $uri/ /index.html; 来解决这个问题。
Step 2
Q:: Vue 项目部署后，如何配置服务器以防止 404 错误？
A:: 为防止 404 错误发生，通常需要在服务器的配置文件中进行重定向设置。以 Nginx 为例，你可以在配置文件中使用 try_files $uri $uri/ /index.html; 这一行代码，它的作用是当用户访问一个路由时，如果该路由在服务器上找不到对应的文件，就会重定向到 index.html，让 Vue 的前端路由来处理。此外，Apache 服务器可以通过 .htaccess 文件配置 FallbackResource /index.html 达到类似效果。
Step 3
Q:: Vue 项目在部署时使用 hash 模式和 history 模式的区别是什么？
A:: Vue 项目在使用路由时，hash 模式会在 URL 中带有 # 符号，例如 https://example.com/#/about，而 history 模式的 URL 则是标准的路径，如 https://example.com/about。hash 模式通过 URL 的 hash 部分实现，不会触发服务器请求，因此不需要服务器配置支持。history 模式则依赖于浏览器的 history API，需要服务器配置支持将所有路由都重定向到 index.html，否则会出现 404 错误。