Vue-router——遇到的坑(一)history模式刷新/设置嵌套路由报错(webpack配置)
前端路由都不是真是存在,只需要为前端跳转做一个显示。hash模式url中会有#存在,看起来不太舒服且不好做SEO,但是由于路由器向服务器发请求的时候会忽略#后面的值,所以在浏览器刷新的时候都是很正常的不会再次发请求。-history模式url就是我们看的正常的路由样子,就是因为看起来很像真的,所以浏览器向服务器请求(也就是刷新)的时候会发现服务器根本没有这个路径资源,所以返回404。...
·
前端路由都不是真是存在,只需要为前端跳转做一个显示。
- hash模式
url中会有#存在,看起来不太舒服且不好做SEO,但是由于路由器向服务器发请求的时候会忽略#后面的值,所以在浏览器刷新的时候都是很正常的不会再次发请求。
-history模式
url就是我们看的正常的路由样子,就是因为看起来很像真的,所以浏览器向服务器请求(也就是刷新)的时候会发现服务器根本没有这个路径资源,所以返回404。
需要在webpack配置项中的devServer加上
// history模式下的url会请求到服务器端,但是服务器端并没有这一个资源文件,就会返回404,所以需要配置这一项
historyApiFallback: {
rewrites: [{
from: /.*/g,
to: '/index.html' //与output的publicPath有关(HTMLplugin生成的html默认为index.html)
}]
},
在router配置中设置children也会出现404的情况,原因就是设置为history模式后,原本的静态资源获取不到了。
// 原先hash模式下打包后的路径引入
<script type="text/javascript" src="bundle.feed9913.js"></script></body>
可以看到是直接引入的bundle.js,所以如果有children,那整个地址就会变成http://localhost:8080/chidren/bundle.js,
但是其实我们需要引入的是http://localhost:8080/bundle.js,所以需要设置在bundle.js加一个/代表从根路径引入。
需要在webpack配置项中加上
output: {
// 表示在引入静态资源时,从根路径开始引入
publicPath: '/'
},
更多推荐
已为社区贡献3条内容
所有评论(0)