Vue下路由History模式打包后页面空白的解决方法

【Vue路由History模式：如何避免打包后页面空白】

在Vue开发中，我们常常遇到路由的问题。默认的hash模式虽然可以正常使用，但由于url带有，不太美观，且在微信分享、授权登录等场景中会遇到一些难题。很多开发者选择使用history模式。使用history模式的新手可能会遇到打包后页面空白的问题。长沙网络推广也提到了这个问题，并给出了解决方案。今天，就跟随长沙网络推广一起来这个问题吧。

一、问题

如果你的Vue项目是直接放在网站的根目录下，使用history模式是不会出现问题的。如果你的项目是一个子目录，那么直接使用history模式就会出现页面空白的现象。这是因为Vue的路由在打包时需要根据项目的实际路径来配置base选项。例如，如果你的项目路径是/history，那么就需要在配置中设置base: '/history'。

二、配置说明

解决了base的问题后，还有一个常见的问题：在刷新其他路由时会出现错误。这是因为history模式是使用了h5的history.pushState来模拟浏览器历史记录，而实际上服务器并没有这个路径的资源。而hash模式由于带有，服务器不会，所以不会出现这个问题。对于history模式，如果服务器上没有相应的路径资源，就会报错。我们需要配置服务器来应对这种情况。

三、服务器配置

对于nginx服务器，可以像下面这样配置：

```bash

location / {

try_files $uri $uri/ /index.html;

}

```

这个配置对于项目根目录是可以的。但如果项目不是根目录，还是会有问题。如果你的项目路径是/history，那么可以这样配置：

```bash

location /history {

root C:/web/static;

index index.html index.htm;

error_page 404 /history/index.html;

if (!-e $request_filename) {

rewrite ^/(.) /history/index.html last;

break;

}

}

```

以上配置可以解决vue打包后页面空白的问题，让history路由可以自由访问。但需要注意的是，非根目录的项目需要加上base的路径。

使用Vue的history模式需要考虑到项目的实际路径和服务器配置。只有正确配置base和服务器，才能避免打包后页面空白的问题。希望以上内容对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。如果你还有其他问题或疑问，欢迎随时向我提问。