如何在react项目里面写多一个文件提供给移动端使用，报错404访问不到路由怎么办

主要使用的技术栈是 react+ts+vite

背景：项目需要单独提供一个文件夹页面提供APP端进行访问；为了不互相影响，所以新建一个目录仿照原来的目录结构进行开发； 1；在index.html文件里面添加

2；在router目录下添加指向 basename:'/customer-personal'

import ErrorPage from "@/features/error/ErrorPage";

const router = createBrowserRouter([
  {
    path: '/edit-mode',
    async lazy() {
      const PaymentMode = await import('../views/payment-mode/MS01EditView.tsx');
      return { Component: PaymentMode.default}
    },
    // async loader(arg) {
    //   const { AppNotificationLoader } = await import(
    //     '@/features/global/loaders'
    //   );
    //   return AppNotificationLoader(arg, 'agent');
    // },
  },
  {
    path: '*',
    errorElement: <ErrorPage />,
    async lazy() {
      const NotFound = await import('../views/payment-mode/TestPage.tsx'); // 假设你有一个 404 页面组件
      return { Component: NotFound.default };
    },
    children:[
      {
        path: 'mode',
        async lazy() {
          const PaymentMode = await import('../views/payment-mode/MS01EditView.tsx');
          return { Component: PaymentMode.default}
        },
      },
    ]
  }

],{
   basename:'/customer-personal'
})

export default router

3，vite.config添加目录代理： '^/customer-personal/.*': { // target: 'http://10.173.74.156:8080', // target: 'http://172.16.200.213:8080', target: 'http://localhost:5174', rewrite: (path) => { const isFileRequest = /.(js|css|png|jpg|jpeg|gif|svg|webp|ico|map|json|txt|pdf|html)$/.test( path, );

      return isFileRequest? path.replace('customer-personal', 'customerPersonal') : '/customerPersonal/index.html';
    },
  },