版权声明：本文为博主原创文章，允许转载，但转载必须注明出处并附带首发链接 https://blog.csdn.net/qq_35393869/article/details/88234235
文章目录
按顺序，先说几个问题，着重的有思路的去分析和解决。
问题一、 vue编译打包dist文件之后部署到线上服务器 ，访问页面却是空白？
为什么？
因为你使用的路由是mode:history模式？！ 还是用Vue丑陋的hush的模式（vue默认路由模式）吧。
- css、js、images等等文件的引用路径都是正确可访问的路径。
- 本地wampserver环境配置，却是正常的效果！【因为node.js环境】
如果在Nginx中再次配置nodejs的话，也是非常坑不现实的！所以这个思路还是放弃吧。
问题二、如果不是空白，页面F5之后就又变成空白？
为什么？
- 非localhost的全部域名url地址，在F5刷新之后，页面都会直接
报错404！- 本地wampserver环境配置外加8080端口号后刷新，却是正常的效果！
看了上面的两处代码，就会发现：正常的路由跳转都是以网页的href跳转（浏览器可见的刷新动画效果那种）来实现的，但此处因为element-UI框架内置组件的方法，可以不用写正常的跳转方式，而是类似于tabs切换的那种效果。（如下图 ‘代码块一’ 的页面效果）。
这样就出现了上文的“问题二”描述的那样，F5之后，页面直接报错404，
以Nginx服务器为例，（如下图FTP所示）
在根目录下配置好文件之后（本案例是部署生产环境下），一切准备就绪之后，发现正常操作地址可以，一旦F5刷新页面（含域名的二级或二级以下地址），网页就会报错404（绝对域名地址刷新不会报错404），
这个是因为Nginx服务器页面执行F5操作相当于浏览器地址烂输入IP地址之后执行了enter，使得浏览器默认查找对应目录下的文件，所以没找到，就会报错404。这就是原因。
解决这个问题，就需要使用正常的路由浏览器跳转，这样正常。
404报错：Not Found （先看截图）
三、 相关阅读引入
- 推荐：vue打包后dist文件放在服务器出现空白页面解决方式
- webpack打包vue项目之后生成的dist文件该怎么启动运行
- vue + axios发送post请求，403错误的解决
- https://segmentfault.com/q/1010000008292792
以上就是关于“ vue项目dist编译文件部署到服务器：页面空白、F5刷新报错404、403报错、等等bug - 总结篇 ” 的全部内容。