nginx配置vue项目history的路由模式（非根目录）

vue的路由分为两种hash和history，hash路由虽然不需要做太多的配置但是url地址上会有一个很丑的#号。
而history模式的路由不会有这个#号但是带来的问题却是刷新页面之后会404找不到页面，原因是spa单页面是通过js来进行跳转的。浏览器根据路由地址是找不到服务器上相关的文件的，所以这里需要进行相应的服务器配置。
这里我选用的是nginx服务器。
vue项目中
vue.config.js

router.js

然后npm run build打包。
nginx相关的配置

 server {
        listen       81;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        location ^~/test {
             #root /test/;             #项目路径
             index index.html;                        
             try_files $uri $uri/ /test/index.html;        #匹配不到任何静态资源，跳到同一个index.html
             error_page 404 /test/index.html;//404页面跳到同一个index.html
    }

nginx目录
项目是放在nginx服务器根目录下的test文件夹下的

启动nginx浏览器访问localhost:81/test/
选择到其中一个二级页面进入页面后刷新没有报404！！！大功告成！！！

#2020/1/3
nginx的相关操作
开启：在nginx安装的根目录运行cmd执行nginx命令
停止：nginx -t