vue-route+webpack单页路由项目，打包后访问正常刷新出现404问题

问题

---

今天打包一个项目的时候，正常输入index.html访问的时候没有问题，但是刷新后出现了404错误。调试的时候正常。

分析

---

文件打包后生成index.html文件和dist目录。
首页进入后正常，xxxx/index.html，点击一个页面后url变为：xxxx/app

正常访问下访问其他页面是由vue-route控制，但是刷新的时候这个路由文件并没有加载，因此会去寻找服务器端资源，没有找到就会返回404。

解决

---

查找资料后，开启HTML5 History Mode后，需要server端的支持，官网里有说明：
https://router.vuejs.org/zh-cn/essentials/history-mode.html

服务端重写url即可

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>

在根目录创建.htaccess文件后粘贴上面的代码

nginx

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