vue项目部署后部分子页面刷新后403

vue项目部署后部分子页面刷新后403_第1张图片

经过我的仔细分析;终于找到了是刷新后路径后面自动拼接了 / ;如 66.66.66.66/aPage 刷新后变成了 66.66.66.66/aPage/ 导致403 

方法一: 修改路由为hash模式

// router/index.js

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'


const router = createRouter({
  // history: createWebHistory(import.meta.env.BASE_URL), // history
  history: createWebHashHistory(import.meta.env.BASE_URL), // hash
  routes: [
    {
      path: '/',
      name: 'Home',
      meta: {
        title: '主页',
      },
      component: HomeView,
    },
    {
      path: '/:pathMatch(.*)*',
      component: () => import('@/views/error/404.vue'),
    },
  ],
})

router.beforeEach((to, from, next) => {
  const title = to.meta.title
  if (title) {
    document.title = title
  }
  next()
})

export default router

方法二:配置negix

    location / {
        # 关键配置:禁用自动补全斜杠和目录匹配
        try_files $uri $uri/index.html /index.html;
        
        # 强制路径标准化(移除结尾斜杠)
        if ($request_uri ~ ^/(.*)/$) {
            return 301 /$1;
        }
    }

方法三:TODO

你可能感兴趣的:(博客,前端)