【转】React、Vue访问NotFound

部署完成后，访问没问题，从页面中点击跳转也没问题，但是只要点击刷新或通过浏览器地址栏回车，就会出现404现象！在本地开发中是没有这个问题的，调试的时候一切都是正常的

直接访问地址，便会出现404

http://www.xxx.com/home/application/list

问题原因：

刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径。

如上的404现象，是因为在nginx配置的根目录/html/dist下面压根没有/home/application/list这个真实资源存在，这些访问资源都是在js里渲染的。

问题解决：

后端配置例子

Apache 取消下面注释

LoadModule rewrite_module modules/mod_rewrite.so

.htaccess添加

<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;
}

注意：

因为这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，你应该在应用最后一个路由给出一个 404 页面。

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

最后：

vue

直接把模式设定history删除，用router默认的hash模式，这样基本上直接访问url是没有问题的， 只不过url中会多出一个#号

react

BrowserRouter替换为HashRouter 同理