vue.js的history模式部署在nginx中不能根据地址栏上的路径跳转到相应的路由组件

vue.js项目在本地运行正常，可以根据地址栏上的路径跳转到相应的路由组件。但是部署到nginx服务器后出现问题，地址栏上输入其他组件的路径总是跳转到首页。

问题分析：一般开发的单页应用的URL都会带有#号的hash模式，因为整个应用本身而言就只有一个HTML，其他的都是通过router来渲染。如果不想要很丑的 hash，我们可以用路由的 history 模式。但是history模式下，当通过地址栏访问相应的路由组件时，服务器会把地址栏上的路径当成get请求，但是服务器没有相应的后端请求配置，这时候就会出现404错误或者302错误。

问题解决方法：

server {
        listen       80;
        server_name  localhost;
        root        E:/vue/my_project/dist;#vue项目的打包后的dist
        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }

 (@router是相应的组件path)   比如：

{ path: '/Lucky',   /@router
      name: 'lottery',
      component: LotteryLogin }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {      
            rewrite ^.*$ /index.html last;
        }
        #......................
  }