我们知道前端常用的有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配置的非根地址一致，防止静态资源404
plugins: [
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,所以这里要加上，防止404
index index.html index.htm;
}部署好后重启nginx，然后就可以访问多个项目啦 如www.aaaa.com 是客户端项目 www.aaa.com/admin是管理员端项目 www.aaa.com/user 是内部端项目，拜
