当前位置:   article > 正文

html5路由如何在nginx上部署(vite+vue3)

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,基础路由是这个,后续的路由都是在这个地址后面运行。代码如下:

  1. import { createRouter, createWebHistory } from "vue-router";
  2. const headline=" |"
  3. const router = createRouter({
  4. history: createWebHistory('/'), //告诉router 我们后续的路由是以这个为基础,就是以根地址为基础运行
  5. routes: [
  6. { path: '/:pathMatch(.*)*', redirect:"/",name:"404"}, //解决history模式下的路由无法匹配问题
  7. {
  8. path: "/",
  9. name: "index",
  10. component: () => import("../views/BaseLayout.vue"),
  11. children: [
  12. {
  13. path: "",
  14. name: "home",
  15. component: () => import("../views/home/HomeView.vue"),
  16. meta: { title: `首页${headline}` },
  17. },
  18. {
  19. path: "/forum",
  20. name: "forum",
  21. component: () => import("../views/forum/ForumView.vue"),
  22. meta: { title: `关于论坛${headline}` },
  23. },
  24. {
  25. path: "/journalism",
  26. name: "journalism",
  27. component: () => import("../views/journalism/JournalismView.vue"),
  28. meta: { title:`新闻中心${headline}` },
  29. },
  30. {
  31. path: "/partner",
  32. name: "partner",
  33. component: () => import("../views/partner/PartnerView.vue"),
  34. meta: { title:`合作伙伴${headline}` },
  35. },
  36. {
  37. path: "/territory",
  38. name: "territory",
  39. component: () => import("../views/territory/TerritoryView.vue"),
  40. meta: { title:`关注领域${headline}` },
  41. },
  42. ],
  43. },
  44. ],
  45. scrollBehavior (to, from, savedPosition){
  46. return { top: 0 }
  47. },
  48. });
  49. router.beforeEach((to: object | any, from, next) => {
  50. //beforeEach是router的钩子函数,在进入路由前执行
  51. if (to.meta.title) {
  52. //判断是否有标题
  53. document.title = to.meta.title;
  54. }
  55. next(); //执行进入路由,如果不写就不会进入目标页
  56. });
  57. router.afterEach((to, from) => {
  58. })
  59. export default router;

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

        

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

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

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

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

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

  1. import { createRouter, createWebHistory } from "vue-router";
  2. const headline=" |"
  3. const router = createRouter({
  4. history: createWebHistory('/admin'), //告诉router 我们后续的路由是以这个为基础,就是以根地址为基础运行
  5. routes: [
  6. { path: '/:pathMatch(.*)*', redirect:"/",name:"404"}, //解决history模式下的路由无法匹配问题
  7. {
  8. path: "/",
  9. name: "index",
  10. component: () => import("../views/BaseLayout.vue"),
  11. children: [
  12. {
  13. path: "",
  14. name: "home",
  15. component: () => import("../views/home/HomeView.vue"),
  16. meta: { title: `首页${headline}` },
  17. },
  18. {
  19. path: "/forum",
  20. name: "forum",
  21. component: () => import("../views/forum/ForumView.vue"),
  22. meta: { title: `关于论坛${headline}` },
  23. },
  24. {
  25. path: "/journalism",
  26. name: "journalism",
  27. component: () => import("../views/journalism/JournalismView.vue"),
  28. meta: { title:`新闻中心${headline}` },
  29. },
  30. {
  31. path: "/partner",
  32. name: "partner",
  33. component: () => import("../views/partner/PartnerView.vue"),
  34. meta: { title:`合作伙伴${headline}` },
  35. },
  36. {
  37. path: "/territory",
  38. name: "territory",
  39. component: () => import("../views/territory/TerritoryView.vue"),
  40. meta: { title:`关注领域${headline}` },
  41. },
  42. ],
  43. },
  44. ],
  45. scrollBehavior (to, from, savedPosition){
  46. return { top: 0 }
  47. },
  48. });
  49. router.beforeEach((to: object | any, from, next) => {
  50. //beforeEach是router的钩子函数,在进入路由前执行
  51. if (to.meta.title) {
  52. //判断是否有标题
  53. document.title = to.meta.title;
  54. }
  55. next(); //执行进入路由,如果不写就不会进入目标页
  56. });
  57. router.afterEach((to, from) => {
  58. })
  59. export default router;

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

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

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

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

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

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号