yarn(vue) build之后上传到服务器，刷新页面出现404

版权声明：lie_sun版权所有 https://blog.csdn.net/weixin_43260760/article/details/87966092

yarn build打包之后，刷新页面出现404，HTML5 History 模式

原因分析：

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会出现找不到情况

如果不想使用 hash模式，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

   mode: 'history',

当你使用 history 模式时，URL 就像正常的 url，例如 http://baidu.com/user/abc， 也好看！

但是这种模式要玩好，还需要后台配置支持。因为我们开发的是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://baidu.com/user/abc， 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 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>

Nginx

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

或者
location /{
        root   /data/nginx/html;
        index  index.html index.htm;
        error_page 404 /index.html;
}
或者
location /{
        root   /data/nginx/html;
        index  index.html index.htm;
        if (!-e $request_filename) {
            rewrite ^/(.*) /index.html last;
            break;
        }
    }