解决history路由模式下页面刷新404问题 广东靓仔

欢迎关注前端早茶，与广东靓仔携手共同进阶

前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~

背景

前端路由 实际是路由与组件的映射表
访问任何路径，服务器只需要响应index.html （单页面应用）
浏览器根据不同路由 匹配要渲染的内容

刷新操作时候： 浏览器会带着地址栏路由请求服务器返回相应地静态资源
如果没有找到对应的资源 返回 404

解决方案

配置nginx:

location / {
    root /...
    # vue工程的路由是history模式
    try_files $uri $uri/ /index.html; // ** 重点加上这个配置
    index index.html index.html
}

前端 HTML5 History API

historyApiFallback
historyApiFallback 主要是用来解决HTML5 History API，访问服务器，返回404错误问题

问题
在路由跳转之后，进行页面刷新时，返回404错误
通过页面的前端路由访问页面内容，返回404
配置参考webpack 配置 devServer -> historyApiFallback
boolean类型： 默认为false
设置为true时，任何服务器404 response 都会返回index.html页面
对象类型： rewrites 配置多个匹配
参考 connect-history-api-fallback

配置多个页面匹配

devServer: {
    historyApiFallback: {
      rewrites: [
        { from: /^\/$/, to: 'index.html' },
        { from: /^\/test/, to: 'test.html' }
      ]
    }
}

cli 使用
开启： webpack serve --history-api-fallback
禁用： webpack serve --no-history-api-fallback

serve webpack-dev-server

vue/cli项目中默认配置了true

router
history 模式配置base: process.env.BASE_URL
BASE_URL 默认为 output.publicPath

vue 项目output.publicPath 一般设置为’/’
webpack 默认为’./’ 所以自己构建可以设置output.publicPath为’/’

欢迎关注前端早茶，与广东靓仔携手共同进阶

前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~