在vue-router
中有两种模式,分别是hash
和history
模式。两者最明显的区别就是hash
模式的路由地址有一个#
号字符,history
模式就没有这个#
号,看起来更像一个正常的地址。但是它缺存在一个问题,那就是打包部署后,刷新页面就会出现404。
解决的办法,在Vue Router官网就有说明。使用Express
部署可以使用connect-history-api-fallback
中间件
首先下载安装:
npm i connect-history-api-fallback -S
具体使用如下:
const history = require('connect-history-api-fallback')
const compression = require('compression')
const express = require('express')
const path = require('path')
const app = express()
const httpPort = 5000
// 启用gzip
app.use(compression())
// 解决history路由问题
app.use(history())
// 静态资源
app.use(express.static(path.join(__dirname, './dist')))
// 启动服务器
app.listen(httpPort, () => {
console.log(`http://localhost:${httpPort}`)
})