Vue 解决刷新404问题

1931600225486_.pic.jpg

环境

• laradock

• @vue/cli 4.5.4

问题

• 启动 vue 项目

$ yarn serve

2020-09-16_5f6177d2a45f7.png

• 访问

2020-09-16_5f617f4f36082.png

首次访问 http://localhost:8080/admin-dev/ ，正常。

• 刷新

2020-09-16_5f617f90eef8f.png

刷新后，404。

解决

• 修改 src/router/index.js

const router = new VueRouter({
  mode: 'hash'
})

这种情况应该是前端路由模式使用了history 模式，将前端路由模式设置为hash模式，刷新就不会404了。

• 再次刷新

2020-09-16_5f617f4f36082.png

再次刷新后，可以正常访问。