vue中history路由模式下打包后 二级 多级路由无法访问 刷新空白404的问题

        最近写了几个后台,都是用的哈希路由. 前几天写了一个移动端的任务中心. 领导要求需要用history模式的路由.于是踩了一些坑儿. 特地分享给大家.

 

        改为history后遇到了多级路由无法访问的问题, 原因:

        我们以前使用哈希路由时, 打包后, 然后访问网址network面板的js文件请求是这样的:

         http://ap.taoyuewenhua.com/js/chunk-7b65b1f8.1f169e27.js

        而且当我们切换路由以及切换到二级路由时  js及css文件访问的路径是不变的  依然是:

        http://ap.taoyuewenhua.com/js/chunk-7b65b1f8.1f169e27.js

        我们都知道打包后的文件路径是这样的:

         dist

                css

                         a.css

                js

                         b.js

                index.html

           所以这个时候访问是没有问题的

          

             但一旦更改到history模式后, 一级路由也是没有问题的, 同上;    但是多级路由就有有问题 , 多级路由时, 请求的地址如下:

            假设你的多级路由是path:     'order/list';     请求地址就会变为:

            http://ap.taoyuewenhua.com/order/list/js/chunk-7b65b1f8.1f169e27.js

            css文件也是这样的, 请求时的路径变成了这样, 所以就请求不到了. 页面显示空白;  也就是说, 我们只要让这个地址变成

           http://ap.taoyuewenhua.com/js/chunk-7b65b1f8.1f169e27.js

           就可以请求到了, 把order/list去掉就行.  怎么做呢?  其实很简单:

           在你项目的vue.config.js里 加上这个:    publicPath: '/'     

            就可以了

           注意: vue.config.js是vue-cli3.0及以上的文件   如果你的项目是vue-cli2.X    则需要去config  >  index.js 里去修改;  而且路径不叫publicPath    叫assetsPublicPath

 

    ok   今天到此