vue-路由history模式刷新页面404

前言

为了追求路由美观，又或者说为了便于网页的SEO优化，

常常会舍弃hash路由而改用history路由。

router-index.js基础配置

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
  // 切换路由后滚动条置顶
  scrollBehavior() {
    return {
      x: 0,
      y: 0,
    };
  },
});
1
2
3
4
5
6
7
8
9
10
11
12

本地404

设置完以后，问题来了，页面刷新会报404怎么办。

vue.config.js设置 publicPath、historyApiFallback

module.exports = {
  publicPath: "/",
  lintOnSave: false, // 关闭eslint
  publicPath: "./", // 将打包文件为相对路径(避免上线后路径错误)
  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
  devServer: {
    // history模式下的url会请求到服务器端，但是服务器端并没有这一个资源文件，就会返回404，所以需要配置这一项
    historyApiFallback: {
      index: "/index.html", // 与output的publicPath
    },
    // proxy: {
    //   "/": {
    //     //这里最好有一个 /
    //     target: "http://47.103.32.42:8081/", // 线上服务器端接口地址
    //     ws: true, //如果要代理 websockets，配置这个参数
    //     // 如果是https接口，需要配置这个参数
    //     changeOrigin: true, //是否跨域
    //     pathRewrite: {
    //       "^/": "/",
    //     },
    //   },
    // },
  },

};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

以上配置完成之后，会发现本地页面刷新ok，并无不适。

但是上线后，问题又来了

nginx还是404…

怎么办？只需在nginx.conf中添加参数配置即可。

        location / {
         try_files $uri $uri/ /index.html$args;
        }

1
2
3
4

修改完配置文件后记得配置的更新

nginx -s reload
1

原因分析

产生问题的本质是因为我们的路由是通过JS来执行视图切换的，

当我们进入到子路由时刷新页面，web容器没有相对应的页面此时会出现404

所以我们只需要配置将任意页面都重定向到 index.html，把路由交由前端处理

配置proxy后导致页面报错

很多小伙伴上线后配置了跨域代理，但是发现接口返回的并不是想要的数据，还是大块的html，这时候大部分情况下是因为proxy参数没配好导致的。

    proxy: {
      '/api': {
        //这里最好有一个 /
        target: 'https://api.thecatapi.com/v1/', // 线上服务器端接口地址
        ws: false, //如果要代理 websockets，配置这个参数
        // 如果是https接口，需要配置这个参数
        changeOrigin: true, //是否跨域
        historyApiFallback: {
          index: '/index.html', // 与output的publicPath
        },
        pathRewrite: {
          '^/api': '/',
        },
      },
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

使用代理，首先需要有一个标识，告诉程序这个连接要使用代理，不然的话，可能你的html、css、js、矢量图等静态资源都跑去代理,从而导致返回的是一个html，而不是你想要的数据。所以我们要通过一个唯一标识，让接口使用代理，静态资源文件使用本地。
proxy中的 ‘/api’:{······}，就是告诉node，我的接口是要以 /api 开头的才使用代理。所有的接口都要写成 /api/xx/xx ，以 /api 开头，最后代理的接口路径路径就是 http://localhost:8080/api/xx/xx