Nginx服务部署Vue项目后刷新页面,出现404问题--如何解决呢？

下文笔者讲述nginx部署vue页面时，当刷新页面时，出现404页面的设置方法分享，如下所示:

环境描述
   vue-cli 3.x
   nginx

由于项目之前vue-router使用默认'hash'模式，在本地与部署线上环境后都没有问题
由于需要去掉URL中的'#'号
需使用'history'路由模式,故再次部署线上环境后
首页能正常访问，菜单内点击切换也没有问题
当刷新页面后,则出现 404 Not Found 下文将讲述具体的实现方法，如下所示:

---

刷新页面的原理:
    刷新页面会访问服务器资源，但是服务器中nginx下其实没有指定的信息,所以才出现404
    此时我们需将url的信息转到vue-router中进行转发，才能正常的访问页面

例:

 nginx 根目录:
    /www/dist，但是下面没有system/index页面这个目录，它是由vue转发
此时我们需在nginx进行相关设置
---------------------------------------------------------------------------------------
例:
 nginx.conf
server
{
    listen 80;
    server_name testwx.wangshibo.com;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/dist;

    #vue-router配置
    location / {
        try_files $uri $uri/ @router;
        index index.html;
    }
    location @router {
        rewrite ^.*$ /index.html last;
    }
}