当前位置：首页 > news >正文

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

news 来源：原创 2024/9/20 9:38:25

我们知道前端常用的有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，基础路由是这个，后续的路由都是在这个地址后面运行。代码如下：

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来处理。

    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上形成冲突。代码如下

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" ,这里建议使用变量，防止漏改。代码如下：

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

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

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

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