フロントエンドのパッケージ化とアップロード後のルーティング 404 の問題を 1 秒で解決する方法を教えます。

1. 問題の説明

フロントエンドが権限管理を実装した後、ローカル ルーティングは正常にジャンプし、パッケージ化およびアップロードの行で 404 ルーティング パスが見つからないという問題が発生します。

次のエラーを報告します。

 2. エラーの原因

パッケージ化後にルート パスが変更され、フロント エンドがユーザー メニュー権限で取得したコンポーネントを変換しなかったため、アップロード後にパス エラーが発生しました

3. 解決策 (Vue3+ts に基づく)

ステップ1：

メニューを追加する場合、フロントエンド制御ルーティングの本来の書き方のように、コンポーネントの接頭辞を書かないでください: ×

コンポーネント: () => import('/@/views/home/index.vue') または

コンポーネント: () => import('/@/layout/routerView/parent.vue')

実際に追加する場合、正しいコンポーネントの書き方は以下の通りです。

/home/index.vue または

/layout/routerView/parent.vue

ステップ2：

プレルート ナビゲーション ガードでユーザーの許可を取得した後、まずディレクトリ内のすべての .vue および .tsx ファイルを取得します。

/**
 * 获取目录下的 .vue、.tsx 全部文件
 * @method import.meta.glob
 * @link 参考：https://cn.vitejs.dev/guide/features.html#json
 */
const layouModules: any = import.meta.glob('../layout/routerView/*.{vue,tsx}');
const viewsModules: any = import.meta.glob('../views/**/*.{vue,tsx}');
const dynamicViewsModules: Record<string, Function> = Object.assign({}, { ...layouModules }, { ...viewsModules });

次に、メニューの権限を調べて、コンポーネントの値を変換します。

/**
 * 后端路由 component 转换
 * @param routes 后端返回的路由表数组
 * @returns 返回处理成函数后的 component
 */
export function backEndComponent(routes: any) {
  if (!routes) return;
  return routes.map((item: any) => {
    if (item.component) item.component = dynamicImport(dynamicViewsModules, item.component as string);
    item.children && backEndComponent(item.children);
    return item;
  });
}

/**
 * 后端路由 component 转换函数
 * @param dynamicViewsModules 获取目录下的 .vue、.tsx 全部文件
 * @param component 当前要处理项 component
 * @returns 返回处理成函数后的 component
 */
export function dynamicImport(dynamicViewsModules: Record<string, Function>, component: string) {
  const keys = Object.keys(dynamicViewsModules);
  const matchKeys = keys.filter((key) => {
    const k = key.replace(/..\/views|../, '');
    return k.startsWith(`${component}`) || k.startsWith(`/${component}`);
  });
  if (matchKeys?.length === 1) {
    const matchKey = matchKeys[0];
    return dynamicViewsModules[matchKey];
  }
  if (matchKeys?.length > 1) {
    return false;
  }
}