vue-cli 路由使用 ‘history’时 打包上传到服务器白屏的解决办法

在使用 vue-router  时为防止在url上出现“#”，而产生不美观的现象出现，我们一般在router的配置文件index.js中添加

mode: 'history'

这样URL不再会有#号，你会发现整个地址栏都变得很熟悉了,又回到原来的样子了,但是随之而来的问题也会出现了。

在开发阶段一切都是正常的，一点问题都没有。之后例行打包上传，当你高高兴兴的上传到服务器上，打开网页时，你会惊喜的发现，页面一片大空白。。。 空白。。 白。。。，这时静态文件都能够正常的引用，也没有报错，其实大坑就是这个history模式。我们找度娘不难找到解决办法，而且官方文档也给出了解决办法。

     但是我们直接按照官方文档上的方法解决的话，又会掉到坑里，因为文档给出的是在根目录下的解决办法，如果目标文件不在根目录里在其他文件夹要如何解决呢？

    这里提供下本人的解决办法：

       首例行在router的路由配置里开启history模式，重点在第二步，开启history模式后要在nginx配置里修改

 location /xcx {
            try_files $uri $uri/ @router;
            index  /xcx/index.html;
        }
 location @router {
            rewrite ^.*$ /xcx/index.html last;
       }

   这里要注意“xcx”为文件路径，还有第三步将config/index.js 里面的build  里面的 assetsPublicPath 路径改成你的文件路径也就是/xcx/

这样一来 问题就解决了