Vue如何配置history模式

·  阅读 80
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模式的小伙伴能有所帮助,如果哪写的有问题,欢迎留言交流。

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改