Vue打包后白屏和router-view中引用的内容无法显示

原创声明

本文系作者辛苦码字所得,欢迎分享和转载,但请在明显位置注明作者的如下信息:
笔名:来碗鸡蛋面
主页:https://www.jianshu.com/u/4876275b5a73
邮箱:[email protected]
CSDN ID:tom_wong666

今天在工作中遇到Vue打包后白屏问题,问题分为两个阶段解决的,记录下来供大家参考。

一阶段:打包后完全白屏,解决方法:

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

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

你可能感兴趣的:(Vue打包后白屏和router-view中引用的内容无法显示)