SPA 路由history模式上线后刷新404

出现问题：

在使用history模式的时候，由于浏览器路径与后端路径类似，所以当刷新页面的时候，浏览器还是会向服务器发送请求，但是由于服务器并没有对应的路由页面，所以会导致404空白

解决方案：

在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。同时这么做以后，服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。或者，如果是用 Node.js 作后台，可以使用服务端的路由来匹配 URL，当没有匹配到路由的时候返回 404，从而实现后退。

• node服务器
  简单粗暴的一种方法，如果没有读取到静态资源就直接返回html页面，可以用于前端调试

const http = require('http');
const fs = require('fs');

http.createServer((req,res) => {
    fs.readFile(__dirname + req.url, (err, data) => {
      if(!err) {
          res.end(data);
      }else {
          fs.readFile('index.html', (e, html) => {
              if(!e) {
                  res.end(html);
              }
          })
      }
  })
}).listen(8080, err => {
  !err&&(console.log('http://localhost:8080')
})

• nginx静态服务器

server {
      listen       80;
      server_name  localhost;

      location / {
          root   html;
          index  index.html;
          try_files $uri $uri/ /index.html;
      }
   }

在nginx安装目录下，将打包后的文件放置在安装目录下的 html目录中，接着打开conf目录中的nginx.conf文件，修改server部分如上，然后在nginx根目录使用nginx -t测试配置文件修改后的语法是否正确（如果有问题会报错），如果没有错误的话，使用命令nginx -s reload命令重启让配置文件生效，打开浏览器，输入localhost即可看到项目部署完成

同时运行多个程序时，80端口被占用时

server {
    listen       8000;
    server_name  localhost;

    location / {
        root   html/project;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }
}

在html目录下新建文件夹，例如project，将打包后的文件放置在project文件夹下，在conf/nginx.conf文件中，原80端口的下方新加入上述代码，接着重复nginx -t与nginx -s reload再次打开浏览器，输入localhost:8000就可以看到项目部署完成