HTML单页面路由,webpackDevServer解决单页面应用(spa)路由问题

wow.jpg

写在前面

我们知道，现在比较热门的俩框架React/Vue都是属于单页面应用，也就是所谓的SPA，其本质就是通过路由的不同来加载不同的组件，然后插入到html页面的根元素中，行程了一种，切换页面但不需要刷新页面的现象，其优势有很多，现在也被广泛使用。当然现在我们一般使用社区的脚手架做项目的构建，你可能不知道，其实单页面应用的路由切换是需要我们进行一些相关的配置的。不知道你是否遇到过这种情况，当你使用history的路由模式时，部署到服务器上，一刷新就会出现404的情况，这时就需要后台来配合做一个重定向了，其出现的原因是，我们刚才说，前端切换url实际上是切换前端的路由这时候，只有你的页面在index.html下，他才会保持路由的切换，不然就会变成接口的请求，就像传统的请求那样，而SPA只需要返回一次html和js就可以了，其他的时间，都是在往html中注入不同页面的js达到页面切换的效果。所以，就需要后端在每次路由匹配下的url都返回一个html，而不是做对应的请求。

实际上，不过是线上有这样的问题，如果你是使用webpack搭建的原生项目，也是会遇到类似的问题的，因为社区的脚手架都为我们做过了相应的处理，所以你很少在本地遇到，那么今天我们就来说一下，如何使用devServer解决本地出现的路由问题，我们先来搭建一个项目，大家也可以使用自己的现有项目，我使用之前的demo

使用devServer解决单页面应用中的路由问题

这里我使用react来演示，我搭建了一个简单的路由页面如下

import React from 'react'

import ReactDom from 'react-dom'

import { BrowserRouter, Route } from 'react-router-dom'

import Home from './home'

import List from './list'

class App extends React.PureComponent{

render () {

return (

)

}

}

ReactDom.render(, document.getElementById('root'))

其中Home和List分别是两个react页面，我们代码的意思是，根路径下切换Home页面，'list'下切换List页面，我们启动项目，访问根路径是可以访问到的，但是当我们访问'/list'的时候，你会发现下面的错

pageerr.png

这是因为，就像上面说的，devServer把我们请求的url当成了一个后端的接口或者页面，我们提到过，在线上的话，我们需要使用服务器的重定向功能，那么我们在devServer中如何解决这一问题呢？

devServer.historyApiFallback

在webapack devServer为了我们提供了historyApiFallback这个API，我们开启他试一试,然后重启试试

historyApiFallback: true

这样我们的问题就解决了,其原理也是和服务端一样的，这个时候，当你使用netWork做监控的时候，每次无论你输入什么地址都是返回的index.html那个文件了。当然关于historyApiFallback的配置项也有很多，下面我们简单按照官网上的配置项，对一些配置项做解答

我们看官网他的配置可以不是一个布尔值而是一个匹配规则

history.png

那么我们也试着写一下这样的方式。

historyApiFallback: {

rewrites: [

{from: /a.html/, to: '/index.html'}

]

},

意思是，我们访问a.html的时候，会重定向到index.html上，启动项目试一下,我们发现，访问a.html的时候，不再报错，倒是页面是空白的，不过我们查看源代码，会发现，他其实是index.html的内容，这说明我们的配置是成功了的，至于为什么页面空白，是因为我们在index.html并没有为这个a的路径注册对应的路由和组件，一般我们配置成true就可以。

如果你想往深处去探索，可以访问https://github.com/bripkens/connect-history-api-fallback，因为这个配置项的底层就是connect-history-api-fallback。

写在最后

这里我们还要强调一下，historyApiFallback只在本地生效，如果你在服务端也遇到了这个问题，那么是需要在服务端做类似的配置的！