[问题探讨]Vue打包后白屏和router-view中引用的内容无法显示

版权声明：本文作者“Tom哥”，版权归作者所有，欢迎转载，但请务必在明显位置注明作者和原文链接，否则保留追究法律责任的权利。 https://blog.csdn.net/tom_wong666/article/details/82670582

今天在工作中遇到Vue打包后白屏问题，问题分为两级，写出来供大家参考：

一阶段：打包后完全白屏，解决方法：

依照普通方法：修改在config文件夹下面的index.js中build模块导出的路径assetsPublicPath，assetsPublicPath默认的是’/’，也就是根目录。而打包生产文件后，index.html和static在同一级目录下面，所以改为’./’；
这样处理后，神奇的事情发生了，底部导航栏出现了，但是除此之外无任何内容。
检查app.vue后发现app.vue的template标签结构如下：

<div id="app">
<router-view/>
<nav-tab></nav-tab>
</div>

nav-tab的导航栏内容有显示，router-view的内容不见了，下面进入二阶段。
二阶段：打包后，router-view中引用的内容无法显示，解决方法：

先抛出解决方案，后面再简单做一下解释：
去掉/注释掉router.js中标识位置的代码：
const router = new VueRouter({
mode: ‘history’,//注释掉这行代码
routes: […]
})
有这段代码不会100%导致router-view内容无法显示，但是如果要留着这段代码，并确保router-view内容可显示，就必须在服务器端做相应的配置才行。
原因是这段代码更改了vue-router的模式为history 模式，vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载，实现单页面应用。
使用hash模式，浏览器url地址栏一般会出现#…这样冗长丑陋的地址，如果不想要很丑的 hash，就可以用路由的 history 模式，当使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id。
不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://yoursite.com/user/id，无法读取到正确的资源，就会返回 404，所以，如果使用history模式，就必须在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
Apache/nginx/Node.js/Caddy/Firebase等的后台具体设置，请直接访问Vue官网中的解释：
https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子

阅读更多