使用Express部署Vue项目(history模式)

744 阅读1分钟

vue-router中有两种模式,分别是hashhistory模式。两者最明显的区别就是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}`)
})