Vue踩坑日记： history路由打包后无法加载

前言：

在使用Vue框架时避免不了会使用到vue-router工具，Vue-router提供了Hash和History两种路由模式。默认为Hash模式，但此模式下URL中会存在 “#” 缺少美观，并且微信中不允许URL存在“#”。所以很多人会选择History路由模式。

const router = new VueRouter({
  mode: 'history', // 设置为history模式
  base: process.env.BASE_URL,
  ...
})

但是History路由模式也不是没有问题。

1. History 兼容性问题

   因为History路由模式的原理使用的是 Html5提供的API History，仅兼容IE10以上的浏览器，所以在需要兼容低版本浏览器时History路由就不可用了，只能使用Hash路由了。

2. 打包部署后资源文件、router-view加载失败或不加载

   这两个问题放在一起说是因为它们的原因是相同的，根目录设置错误。
   Vue在设计时是假设页面部署在Web服务器根目录的，所以Vue加载资源时默认是在Web服务器根目录下加载的，但实际情况不完全是这样，当部署在子目录时就会出现这个问题，这个时候我们可以在 vue.config.js中设置 publicPath属性，来告诉Vue我们部署在哪个子目录，让Vue在这个目录下加载资源。

   module.exports = {
   	// 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，
   	// 这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。
   	publicPath: './',
   }
   

   虽然publicPath在其他情况下允许是相对路径，但是在使用History路由不能使用相对路径，这样会导致router-view不加载。
   引用官方原文：
   
   至于原因(个人判断)：我查了history.pushState的 MDN文档 时发现当pushState中URL为相对路径时，会根据当前URL进行解析。这样可能导致路由路径解析出错，所以Vue不允许使用相对路径。

3. 通过URL直接访问路由地址，出现404

   问题原因是History路由实现的原理是使用 history.pushState 或 history.replaceState 改变URL，不刷新页面。
   Vue再根据URL加载资源这种方式来实现的路由的，并不代表服务器端真实存在与URL路径对应的页面文件。这时需要后端配合，Web服务器配置资源不存在时进行路径重写

   Apache配置路径重写：

   1、启用 LoadModule rewrite_module modules/mod_rewrite.so
   2、再Vue项目打包生成的目录下创建文件  .htaccess
   3、在文件中加入
   	<IfModule mod_rewrite.c>
   		 # 开启路径重写
   		 RewriteEngine On
   		 # 指定重写的路径的根目录（部署所在的目录）
   		 RewriteBase /app/
   		 RewriteCond %{REQUEST_FILENAME} !-f
   		 RewriteCond %{REQUEST_FILENAME} !-d
   		 # 重写到指定的目录下的哪个文件
   		 RewriteRule ^(.*)$ index.html [L]
   	</IfModule>
   

   其他Web服务器请参考：官方例子

   题外话： 这边建议只设置重写到首页文件，未知路由显示404的情况放到vue-router的配置中。

结语：

以上就是我在使用Vue-router的History模式时发现，希望对大家有帮助。如果发现我写的有什么问题欢迎指出，或者存在我没有提到的也请提出，让我也学习下。