Vue前端项目线上nginx部署后刷新页面404问题

最近公司开发的Vue前端项目，让我在服务器上部署，然后发现刷新页面出现404并且无法通过新窗口单独打开除首页外的其他页面的链接。

原因：因为网页上显示的是文件绝对路径，而实际上服务器上是没有该路径的，所以导致刷新会报404

解决方法一：

vue router mode 默认为hash，这样的url中会带有#，如果改成mode:'history’就能去掉#号，也可以正常访问，但是再次刷新你页面就会出现404

const router = new Router({
    mode: 'history'
});

解决方法二：

修改nginx伪静态配置：

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

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>