permissions.js:43 Error: Cannot find module '@/vab/layouts

[sucjun]

请问这个错误如何解决呢?

//错误信息
Error: Cannot find module '@/vab/layouts'

报错函数

export function convertRouter(asyncRoutes) {
  return asyncRoutes.map((route) => {
    if (route.component) {
      if (route.component === 'Layout') {
        route.component = (resolve) => require(['@/vab/layouts'], resolve)
      } else {
        const index = route.component.indexOf('views')
        const path =
          index > 0 ? route.component.slice(index) : `views/${route.component}`
        route.component = (resolve) => require([`@/${path}`], resolve)
      }
    }
    if (route.children && route.children.length)
      route.children = convertRouter(route.children)
    if (route.children && route.children.length === 0) delete route.children
    return route
  })
}

配置文件

/**
 * @description vue.config.js全局配置
 */
import {rspack} from "@rsbuild/core";

const {defineConfig, loadEnv} = require("@rsbuild/core");
import { pluginVue2 } from '@rsbuild/plugin-vue2';
import { pluginSass } from '@rsbuild/plugin-sass';
const path = require('path')

const {
    baseURL,
    publicPath,
    assetsDir,
    outputDir,
    lintOnSave,
    transpileDependencies,
    abbreviation,
    devPort,
    providePlugin,
    build7z,
    buildGzip,
} = require('./src/config')
const { webpackBarName, webpackBanner } = require('./vab.config')
const Webpack = require('webpack')
const WebpackBar = require('webpackbar')
const FileManagerPlugin = require('filemanager-webpack-plugin')
const dayjs = require('dayjs')
const dateTime = dayjs().format('YYYY-M-D HH:mm:ss')
const CompressionWebpackPlugin = require('compression-webpack-plugin')

const productionGzipExtensions = ['js', 'css']//'html', 'svg',

const resolve = (dir) => {
    return path.join(__dirname, dir)
}

const { publicVars } = loadEnv({ prefixes: ['VUE_APP_'] });

module.exports = defineConfig({
    plugins: [
        pluginVue2(),
        new pluginSass({
            sassLoaderOptions: {
                additionalData(content, loaderContext) {
                    const {resourcePath, rootContext} = loaderContext
                    const relativePath = path.relative(rootContext, resourcePath)
                    if (
                        relativePath.replace(/\\/g, '/') !==
                        'src/vab/styles/variables/variables.module.scss'
                    )
                        return '@import "~@/vab/styles/variables/variables.module.scss";' + content
                    return content
                },
            }
        })
    ],
    source: {
        define: publicVars,
        // 指定入口文件
        entry: {
            index: './src/main.js',
        },
        alias: {
            "@": path.resolve(__dirname, "src"),
            "@assets": path.resolve(__dirname, "src/assets"),
            "/static": path.resolve(__dirname, "public/static"),
        },
    },
    html: {
        template: './public/index.html',
    },

    publicPath,
    assetsDir,
    outputDir,
    lintOnSave,
    transpileDependencies,
    server: {
        client: {
            overlay: false
        },
        hot: true,
        port: devPort,
        open: false,
        // 注释掉的地方是前端配置代理访问后端的示例，一定要注意，这里配置了跨域及代理只针对开发环境生效！！！
        // 不建议你在前端配置跨域，建议你后端配置放行token字段，一步到位
        proxy: {
            '/api': {
                target: 'https://www.xxxx.cn',
                pathRewrite: { '^/api': '' },
            },
        },
    },
    tools: {
        rspack: {
            ignoreWarnings: [
                /Using \/ for division outside of calc()/,
                // /warning from compiler/, warning => true
            ],
            // devtool: 'source-map',
            // cache: {
            //     type: 'filesystem', // 使用文件系统缓存
            //     buildDependencies: {
            //         config: [__filename], // 缓存依赖于配置文件
            //     },
            // },
            module: {
                rules: [
                    // {
                    //     test: /\.vue$/,
                    //     loader: 'vue-loader',
                    // },
                    // {
                    //     test: /\.css$/i,
                    //     use: [
                    //         'style-loader', 'css-loader'
                    //     ]
                    // },
                ]
            },
            resolve: {
                alias: {
                    '@': path.resolve(__dirname, 'src'),
                    '*': resolve(''),
                    process: "process/browser",
                    'vue$': 'vue/dist/vue.esm.js',
                },
                extensions: ['.js', '.vue', '.json'],
                fallback: {
                    fs: false
                }
            },
            plugins: [
                // new VueLoaderPlugin(),
                new rspack.ProvidePlugin(providePlugin),
                // new WebpackBar({
                //     name: webpackBarName,
                // }),
            ],
        },
        bundlerChain: (config)=>{
            // config.resolve.symlinks(true)
            config.module.rule('svg').exclude.add(resolve('src/icon'))
            config.module
                .rule('vabIcon')
                .test(/\.svg$/)
                .include.add(resolve('src/icon'))
                .end()
                .use('svg-sprite-loader')
                .loader('svg-sprite-loader')
                .options({symbolId: 'vab-icon-[name]'})
            config.when(process.env.NODE_ENV === 'development', (config) => {
                // config.devtool('source-map')
            })
            config.when(process.env.NODE_ENV === 'production', (config) => {
                config.performance.set('hints', false)
                // config.devtool('none')
                config.optimization.splitChunks({
                    chunks: 'all',
                    cacheGroups: {
                        libs: {
                            name: 'vue-admin-beautiful-pro-libs',
                            test: /[\\/]node_modules[\\/]/,
                            priority: 10,
                            chunks: 'initial',
                        },
                        elementUI: {
                            name: 'vue-admin-beautiful-pro-element-ui',
                            priority: 20,
                            test: /[\\/]node_modules[\\/]_?element-ui(.*)/,
                        },
                    },
                })
                config
                    .plugin('banner')
                    .use(Webpack.BannerPlugin, [`${webpackBanner}${dateTime}`])
                if (buildGzip)
                    config.plugin('compression').use(CompressionWebpackPlugin, [
                        {
                            filename: '[path][base].gz[query]',
                            algorithm: 'gzip',
                            test: new RegExp(
                                '\\.(' + productionGzipExtensions.join('|') + ')$'
                            ),
                            threshold: 8192,
                            minRatio: 0.8,
                            deleteOriginalAssets: true
                        },
                    ])
                if (build7z)
                    config.plugin('fileManager').use(FileManagerPlugin, [
                        {
                            onEnd: {
                                archive: [
                                    {
                                        source: `./${outputDir}`,
                                        destination: `./${outputDir}/${abbreviation}_${dateTime}.7z`,
                                    },
                                ],
                            },
                        },
                    ])
            })
        }
    },
})

[9aoy]

Please provide a reproduction repo

[sucjun]

// route.component = (resolve) => require([`@/${path}`], resolve)
        try {
          route.component = (resolve) => import(`@/${path}`)
        }catch (e){

        }

改写成这样可以 服务端返回的路由页面不存在导致报错