vue -- vue-router的history模式打包后页面空白的解决方案

版权声明:本文为博主原创文章,若要转载请申明出处与连接 https://blog.csdn.net/wxl1555/article/details/81208570

欢迎访问我的个人博客:http://www.xiaolongwu.cn

前言

采坑记录,以便后面翻阅

首先你需要确认页面空白不是由资源文件路径不正确引起的,如果资源找不到就将绝对路径改为相对路劲,具体解决方案看这里:webpack–资源和css中图片引用打包为相对路径的方案

问题现象

在本地开发环境没有任何问题,路由也正常显示,但是打包并部到服务器之后,访问页面就是空白,看控制台也没有报错,当时就是懵逼状态!!

仔细想一下,history模式下就是在操作html5的history的一些api,所以肯定是url出了问题。

分析问题

本地开发环境中,我们访问的地址为:

localhost:8888

以上没什么毛病,一切都好使

但是,我们的项目并没有部署在nginx的根目录,而是在根目录的/aaa/目录下

所以我们默认的访问地址为:

www.xxxx.com:9999/aaa/   

//即去找aaa目录下的index.html文件

// 等价于开发环境的 localhost:8888

这里问题就来了,我们配的路由中并没有aaa,所以我们的路由不认识aaa,这就是问题

找到问题之后去看了下官方文档,还真找到了解决方案,请看这里官方文档

解决方案就是给路由中加一个base的属性,值为 ‘/aaa’即可
image

引深

如果我们要直接访问某个路由,是不是直接在地址栏里输入url + 路由地址,例如

www.xxxx.com:9999/aaa/login

但是,当我们敲了回车之后,页面上一个很大的404

为什么呢?

我们来看一下后台服务器是如何处理个请求的,服务器会默认去找aaa文件夹下面的login文件,如果没找到就去找aaa/login/下面的index.html文件,如果没找到就会返回给前台404页面;

像这种直接在浏览器地址栏直接输入一个路由地址时,我们的路由值起不到任何作用的,只会返回404;

解决方案就是在后台服务器去做一些操作,官方文档也有这部分的说明,文档

由于我们项目不是部署在根目录下,所以和官方给出的解决方案有点不太一样,我们用的是nginx;

location /aaa {
    root home/xxx/www   //你自己的根目录地址
    try_files $uri $uri/ /aaa/;     //这里的 /aaa/ 也可以写成/aaa/index.html
}

$uri为变量,代表你访问的地址。

上面配置的意思大概是,如果访问aaa/文件夹下面的某个文件,找不到时就返回/aaa/下面的index.html文件

这样之前的问题就解决了

我的个人博客地址:http://www.xiaolongwu.cn

github资源地址:https://github.com/vue – vue-router的history模式打包后页面空白的解决方案.md

我的CSDN博客地址:https://blog.csdn.net/wxl1555

如果您对我的博客内容有疑惑或质疑的地方,请在下方评论区留言,或邮件给我,共同学习进步。

邮箱:wuxiaolong802@163.com

阅读更多

没有更多推荐了,返回首页