Vue踩坑日记: history路由打包后无法加载
在使用Vue框架时避免不了会使用到vue-router工具,Vue-router提供了Hash和History两种路由模式。默认为Hash模式,但此模式下URL中会存在 “#” 缺少美观,并且微信中不允许URL存在“#”。所以很多人会选择History路由模式。const router = new VueRouter({mode: 'history', // 设置为history模式base: p
前言:
在使用Vue框架时避免不了会使用到vue-router工具,Vue-router提供了Hash和History两种路由模式。默认为Hash模式,但此模式下URL中会存在 “#” 缺少美观,并且微信中不允许URL存在“#”。所以很多人会选择History路由模式。
const router = new VueRouter({
mode: 'history', // 设置为history模式
base: process.env.BASE_URL,
...
})
但是History路由模式也不是没有问题。
-
History 兼容性问题
因为History路由模式的原理使用的是 Html5提供的API
History
,仅兼容IE10以上的浏览器,所以在需要兼容低版本浏览器时History路由就不可用了,只能使用Hash路由了。 -
打包部署后资源文件、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不允许使用相对路径。 -
通过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模式时发现,希望对大家有帮助。如果发现我写的有什么问题欢迎指出,或者存在我没有提到的也请提出,让我也学习下。
更多推荐
所有评论(0)