vue.js - vue前端去掉“#”，与后台联调点击刷新会出现404，怎么解决？

问题描述

问 题

问题：前端去掉#，与后台联调点击刷新会出现404，怎么解决？
前端去掉#代码：
mode: 'history',
routes: [

  {
  path: '/',
  redirect: 'home',
   },{
  path: '/home',
  component: home
}
  

]
正常时：

点击刷新报错信息：

解决方案

服务器需要额外做配置，具体参考 HTML5 History 模式

后端配置例子

• Apache

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

• Nginx

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

这篇关于vue.js - vue前端去掉“#”，与后台联调点击刷新会出现404，怎么解决？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！