原创声明
本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：https://www.jianshu.com/u/4876275b5a73
邮箱：job_tom@foxmail.com
CSDN ID：tom_wong666
今天在工作中遇到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#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
网友评论