vue项目部署后刷新报404或Cannot get /xxx 解决方法

项目npm run build 之后的dist放到ngigx中，修改下nginx的配置文件 ，在conf中的nginx.conf

将这部分代码修改为

 

 listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root  F:/Nginx/nginx-1.20.0/html/dist/;
            index  index.html;
            try_files $uri $uri/ /index.html;
        }

  try_files $uri $uri/ /index.html;——这一段就是用来防止刷新之后出现Cannot Get /XXX的

但是：

这么做以后，访问任何路径都不会出现 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。
 

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