---

按顺序，先说几个问题，着重的有思路的去分析和解决。

问题一、 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 - 总结篇　”　的全部内容。