html5路由如何在nginx上部署（vite+vue3）

我们知道前端常用的有Hash 模式和html5模式的路由，hash模式在nginx上部署不需要额外的操作，而html5模式则需要额外设置，这里介绍下如何在nginx根地址（location / {}）下部署和在非根地址上（location /admin{}）部署。

在这之前，我先说一下为什么html5路由需要在nginx上配置，我们知道，vue-router就是用来处理路由的，我我们在浏览器上输入地址时，这时候，html5是通过浏览器的history api 来处理地址，但是，这出现了一个问题，当浏览器访问地址时，这时候，服务器上第一个接受这个地址的时nginx，nginx在没有我们配置的情况下，自己把这个地址给处理了，假设，我们发送的是www.abc.com/home,nginx收到这个地址第一件事不是把这个地址转给我们打包的前端的router来处理，而是自己处理，自己先找你有没有在nginx上配置这个home文件或目录，如果没有，直接就返回404，我们要做的是，在nginx上设置，不管你接收到什么地址，全部交给前端处理，也就是vue-router。

1.根地址如何部署html5路由

1.1 在项目打包部署前，我们确定我们要做的是部署在说明地址上，在vue-router的配置里，配置了路由模式后，我们要对路由模式进行处理。在createWebHistory（'/'）上插入地址，告诉router，基础路由是这个，后续的路由都是在这个地址后面运行。代码如下：

javascript 复制代码

import { createRouter, createWebHistory } from "vue-router";
const headline=" |"
const router = createRouter({
  history: createWebHistory('/'),  //告诉router 我们后续的路由是以这个为基础，就是以根地址为基础运行
  routes: [
    { path: '/:pathMatch(.*)*', redirect:"/",name:"404"}, //解决history模式下的路由无法匹配问题
    {
      path: "/",
      name: "index",
      component: () => import("../views/BaseLayout.vue"),
      children: [
        {
          path: "",
          name: "home",
          component: () => import("../views/home/HomeView.vue"),
          meta: { title: `首页${headline}` },
        },
        {
          path: "/forum",
          name: "forum",
          component: () => import("../views/forum/ForumView.vue"),
          meta: { title: `关于论坛${headline}` },
        },
        {
          path: "/journalism",
          name: "journalism",
          component: () => import("../views/journalism/JournalismView.vue"),
          meta: { title:`新闻中心${headline}` },
        },
        {
          path: "/partner",
          name: "partner",
          component: () => import("../views/partner/PartnerView.vue"),
          meta: { title:`合作伙伴${headline}` },
        },
        {
          path: "/territory",
          name: "territory",
          component: () => import("../views/territory/TerritoryView.vue"),
          meta: { title:`关注领域${headline}` },
        },

      ],
    },
    
  ],
  scrollBehavior (to, from, savedPosition){
    return { top: 0 }
  },
});
router.beforeEach((to: object | any, from, next) => {
 
  //beforeEach是router的钩子函数，在进入路由前执行
  if (to.meta.title) {
    //判断是否有标题
    document.title = to.meta.title;
  }
  next(); //执行进入路由，如果不写就不会进入目标页
});

router.afterEach((to, from) => {

})
export default router;

1.2 当我们在router上配置后就可以打包，然后就可以配置nginx了，在nginx上，我们要告诉nginx，你收到什么路由，除了和自己有关的地址，其他的你全部转给前端的router来处理。

bash 复制代码

    location / {  #/是nginx要管的，其他的nginx全部转给前端来处理
       root /data/dist; 
       try_files $uri $uri/ /index.html; #这里告诉nginx如果用户访问的是你没有配置的地址，你全转给前端的router，这个index.html是前端的入口文件。
       index index.html index.htm;
    }

到这里之后，根地址的html5路由已经部署在nginx上，也不会出现刷新后404的问题了

2.非根地址如何部署html5路由

非根路路由下要稍微复杂一点，假设我们要把资源部署在www.sss.com/admin地址下，其中的admin就是非根地址。

1.1 首先我们也是需要在router上配置地址，也是告诉router，我们后续的路由要在/admin的地址上运行，防止和nginx上形成冲突。代码如下

javascript 复制代码

import { createRouter, createWebHistory } from "vue-router";
const headline=" |"
const router = createRouter({
  history: createWebHistory('/admin'),  //告诉router 我们后续的路由是以这个为基础，就是以根地址为基础运行
  routes: [
    { path: '/:pathMatch(.*)*', redirect:"/",name:"404"}, //解决history模式下的路由无法匹配问题
    {
      path: "/",
      name: "index",
      component: () => import("../views/BaseLayout.vue"),
      children: [
        {
          path: "",
          name: "home",
          component: () => import("../views/home/HomeView.vue"),
          meta: { title: `首页${headline}` },
        },
        {
          path: "/forum",
          name: "forum",
          component: () => import("../views/forum/ForumView.vue"),
          meta: { title: `关于论坛${headline}` },
        },
        {
          path: "/journalism",
          name: "journalism",
          component: () => import("../views/journalism/JournalismView.vue"),
          meta: { title:`新闻中心${headline}` },
        },
        {
          path: "/partner",
          name: "partner",
          component: () => import("../views/partner/PartnerView.vue"),
          meta: { title:`合作伙伴${headline}` },
        },
        {
          path: "/territory",
          name: "territory",
          component: () => import("../views/territory/TerritoryView.vue"),
          meta: { title:`关注领域${headline}` },
        },

      ],
    },
    
  ],
  scrollBehavior (to, from, savedPosition){
    return { top: 0 }
  },
});
router.beforeEach((to: object | any, from, next) => {
 
  //beforeEach是router的钩子函数，在进入路由前执行
  if (to.meta.title) {
    //判断是否有标题
    document.title = to.meta.title;
  }
  next(); //执行进入路由，如果不写就不会进入目标页
});

router.afterEach((to, from) => {

})
export default router;

1.2 配置静态文件路径，防止因为nginx改了地址，导致请求不到静态资源，在vite.config.ts里添加base:"/admin" ,这里建议使用变量，防止漏改。代码如下：

javascript 复制代码

export default defineConfig({
  base:"/admin", #和我们nginx配置的非根地址一致，防止静态资源404
  plugins: [
    vue(),
  ],
  assetsInclude: ['**/*.png', '**/*.jpg'], 
})

1.3当前端配置好打包后，在nginx上要配置我们的非根地址，和指向index.html,多的不说，全在代码里，这里要注意下，当nginx配置非根路由时，我们不能用root来绑定前端包了，而是要用alias

bash 复制代码

    location /admin {  #定义好我们的非根地址，这里要注意与router里的一致，防止冲突
       alias /data/dist;
       try_files $uri $uri/ /admin/index.html; #因为前端的base里定义了admin,所以这里要加上，防止404
       index index.html index.htm;
    }

部署好后重启nginx，然后就可以访问多个项目啦如www.aaaa.com 是客户端项目 www.aaa.com/admin是管理员端项目 www.aaa.com/user 是内部端项目，拜