vue打包页面空白解决方法

1、index.html显示空白问题

vue项目打包后，查看index.html，网页显示一片空白，f12查看console均是引用路径错误问题！

具体解决方法：

config--index.js中assetsPublicPath: '/'改为assetsPublicPath: './',如下图所示：

注意修改的为build方法！（改了多次竟然改的是下面的dev方法，为自己的捉急啊。。。谨慎起见，我两个方法均修改了。

后记：改完dev方法之后项目光荣的跑不起来了，页面报错，改回'/'项目运行

assetsPublicPath属性作用是指定编译发布的根目录，‘/’指的是项目的根目录 ，’./’指的是当前目录。

2、项目引用背景图片不显示

采用上面的方法，项目显示出来了，引用的img也没问题，可是背景图片不显示。

具体解决方法：

build--utils.js中添加publicPath:'../../',（其中值可能会有不同，若不同，自己配置成相应的即可。）

为什么同样的路径img能正常显示，而css中的background-image不显示呢？？？

因为img为html标签，他的路径是由index.html开始访问的，走static/img/'图片名'是能正确访问到图片的；但是app.css访问static/img/’图片名’是访问错误的，因为在css目录下并没有static目录。所以此时需要先回退两层到根节点处才可以正确获取到图片。

3、router-view中的内容显示不出来

查资料的时候还看到一种问题：router-view中的内容显示不出来。

当你使用了路由之后，在没有后端配合的情况下就打开路由history模式的时候，打包出来的文件也会是一片空白的情况。

解决：// mode: 'history',//将这个模式关闭就好。

前两个方案亲测有效，第三个问题还没遇到。。。