使用h5的history路由模式时

使用h5的history路由模式时,url里没有#看上去简短好看,但是一刷新就变成查找资源而出现404,
至于解决办法,vue的router网站上提供了Apache、nginx的具体写法。

Apache


  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]

nginx

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

node的写法如下:

const express = require('express')
const history = require('connect-history-api-fallback');
const app = express()

app.use(express.static('dist'))

app.use(history())

app.use(express.static('dist'))
    .listen(3000, function () {
        console.log('app listening at http://3000');
    })

引入了一个第三方中间件,关于这个中间件的用法可以到github>connect-history-api-fallback具体学习

你可能感兴趣的:(使用h5的history路由模式时)