VUE前端如何去除/恢复URL上的#号

Posted 2023-03-05 Y飞羽Y

VUE前端打包到服务器部署之后，访问路径一般是这样的：

http://172.18.169.189:83/#/login

如果想要去除这个#号，一般来说是修改前端vue工程里面的router/index.js

export default new Router(
  base: process.env.VUE_APP_CONTEXT_PATH,
  //将mode设置为history，即可去除#号
  //将mode设置为hash或者不配置，就保留#号
  mode: 'hash',
  scrollBehavior: () => ( y: 0 ),
  routes: constantRoutes
)

但是，去除#号的话，需要注意一个情况，即NG的配置要调整，否则会出现页面刷新之后就404的问题，例如以下场景：

访问http://172.18.169.189:83-》ng去找index.html-》http://172.18.169.189:83/index.html-》对应的业务页面http://172.18.169.189:83/login。

此时执行刷新功能：http://172.18.169.189:83/login-》nginx识别到url路径中的login，去找匹配，找不到-》404