在使用 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/

这样一来 问题就解决了

Logo

前往低代码交流专区

更多推荐