Vue如何配置history模式

文章的背景

一些介绍类的文字此处就姑且略过了，大家可以上网随便搜索，此处不再赘述，直接上配置的干活，因为很多时候我们只是做前端的配置，但是了解服务器上的配置对我们调问题来说还是很有必要的，此处做一下记录。

第一步：打包配置

导出路径，assetsPublicPath: "/edurp/"
后面路径的部分主要看你部署在服务器上相对于根路径的具体路径，我的是在edurp文件夹下
(这个主要是配置你的静态资源放置的位置，所以要配对)

第二步：配置本地路由

const router = new VueRouter({
    mode: "history",
    base: "/edurp/",
    routes: [
      {
        path: "/login",
        component: () => import("@/pages/login/login.vue")
      },
      {
        path: "/edurp",
        component: () => import("@/pages/main.vue"),
        redirect: to => {
          return "/organization";
        },
        children: [
          {
            path: "/organization",
            component: () => import("@/pages/organization/organization.vue")
          }
        ]
      }
    ]
})

这里需要配置你的base路径，也就是你在服务器上放置的路径地址，然后根路径不是 ‘/’ 而是 ‘/edurp’,这个尤其需要注意

第三步：配置服务器的nginx

location /edurp {
    root /mnt/data/web;
    index index.html;
    try_files $uri $uri/ /edurp/index.html;
}

这是我配置的具体访问 /edurp 的代理,因为我的打包路径是在根路径下的 edurp下，所以我是这么配置的。

这大概是经过我几个小时的模式，终于搞定了，希望对配置histroy模式的小伙伴能有所帮助，如果哪写的有问题，欢迎留言交流。