-
出现了什么问题,什么现象?
根据从网上down下来的iview-admin框架进行后台管理系统开发,开发过程顺利,在部署到测试服务器时,打开页面一片空白;或是打开页面时只显示首页跳转到其他页面时显示空白加载不动. -
为什么会出现空白,为什么只出现首页,跳转其他页面不会显示?
打包后的dist文件结构大家可以自己看哈,放在服务器上其实是运维人员将域名或网址指向index.html文件,然后index.html文件去访问/加载静态的css/js/图片等资源.加载不到自然是显示空白的页面(也就是index.html);就看看index.html文件里面引用的路径是不是正确的.接着我来一波自己的分析
正常情况下,vue项目打包后将dist文件部署到服务器上时,会正常显示,既然这样就是我们的方法没有错;接着我们分析哪里出现了错误,从服务器的角度看,出现这两种情况1>.静态资源加载问题,路径找不到;2>.服务器缓存问题;从vue项目角度看,1>路由问题,拦截错误或是其他,2>打包配置问题;
锁定问题就先排查,运维人员确定服务器缓存没问题,是路径问题,dist文件夹是我们自己打的包,这坑只能自己解决,首先说路由,在本地项目可以正常运行,则可以相信路由不会有太大的问题,但是还是要检查路由拦截的代码,确定不会影响页面的加载.剩下打包配置问题了,这一块部分前端新手是不太敢动的,原因是不了解webpack.该出手时就出手.为安全起见先把项目备份一份.查找打包的配置文件vue.config.js. -
怎么处理加载不到资源/路径不对的问题,让页面正常显示?
上面已经分析了一波,打包后路径的问题.其实很简单,找到打包配置文件,在打包时的静态资源打包路径是怎么设置的.如果不对就改掉好了.然后重新打包,看dist文件夹下index.html文件里面是不是能正确引入静态资源.PS:看自己项目的情况,有些放在服务器的路径不一样的话,需要灵活地配置打包配置的子路径.
附张图: