在Vue组件中使用导入会在构建时提供"RangeError:最大调用堆栈大小超出“

Question

在构建Vue项目时，我会得到以下错误：

错误编译失败，有一个错误 下午7:30:01 RangeError:超过最大调用堆栈大小

• Array.join
• loader.js:228 Function.Module._findPath内部/模块/cjs/loader.js:228:56
• loader.js:578 Function.Module._resolveFilename内部/模块/cjs/loader.js:578:25
• loader.js:507 Function.Module._load内部/模块/cjs/loader.js:507:25
• loader.js:637 Module.require内部/模块/cjs/loader.js:637:17
• helpers.js:22需要内部/模块/cjs/helpers.js:22:18
• 萃取物-chunks.js:35 getNames getNames
• 提取液-chunks.js:44 getNames getNames
• 提取液-chunks.js:44 getNames getNames
• 提取液-chunks.js:44 getNames getNames
• 提取液-chunks.js:44 getNames getNames
• 提取液-chunks.js:44 getNames getNames
• 提取液-chunks.js:44 getNames getNames
• 提取液-chunks.js:44 getNames getNames
• 提取液-chunks.js:44 getNames getNames
• 提取液-chunks.js:44 getNames getNames
• 提取液-chunks.js:44 getNames getNames
• 提取液-chunks.js:44 getNames getNames
• 提取液-chunks.js:44 getNames getNames
• 提取液-chunks.js:44 getNames getNames
• 提取液-chunks.js:44 getNames getNames
• 提取液-chunks.js:44 getNames getNames 错误生成与错误一起失败。npm错误！代码ELIFECYCLE npm错误！错误1国家预防机制错误！vuestic-admin@1.9.0构建：vue-cli-service build npm！退出状态1 npm错误！npm错误！在vuestic-admin@1.9.0构建脚本中失败。npm错误！这可能不是国家预防机制的问题。上面可能还有额外的日志输出。

我推断导入路由器的导入语句中存在一个问题。我将这个语句添加到另一个组件中，并复制了相同的错误，从而证实了这一点。

import { router } from "@router";

请告诉我如何解决这个问题。

下面是文件夹路由器中的index.js：

import Vue from 'vue'
import Router from 'vue-router'
import AppLayout from '../components/admin/AppLayout'
import AuthLayout from '../components/auth/AuthLayout'
import lazyLoading from './lazyLoading'

Vue.use(Router)

const demoRoutes = []
if (process.env.NODE_ENV === 'development') {
  const VueBook = require('vue-book')

  demoRoutes.push(
    VueBook.createRoute({
      requireContext: require.context('./..', true, /.demo.vue$/),
      path: '/demo',
    }),
    VueBook.createRoute({
      requireContext: require.context('./../components', true, /.vue$/),
      path: '/presentation',
    }),
  )

  Vue.use(VueBook.VueBookComponents)
}

const EmptyParentComponent = {
  template: '<router-view></router-view>',
}

const router = new Router({
  routes: [
    ...demoRoutes,
    {
      path: '*',
      redirect: { name: 'dashboard' },
    },
    {
      path: '/auth',
      component: AuthLayout,
      children: [
        {
          name: 'login',
          path: 'login',
          component: lazyLoading('auth/login/Login'),
        },
        {
          name: 'logout',
          path: 'logout',
          component: lazyLoading('auth/logout/Logout'),
        },
        {
          name: 'signup',
          path: 'signup',
          component: lazyLoading('auth/signup/Signup'),
        },
        {
          name: 'company',
          path: 'company',
          component: lazyLoading('auth/company/Company'),
        },
        {
          name: 'companycontact',
          path: 'companycontact',
          component: lazyLoading('auth/companycontact/Companycontact'),
        },
        {
          path: '',
          redirect: { name: 'login' },
        },
      ],
    },
  ],
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    let user
    Vue.prototype.$Amplify.Auth.currentAuthenticatedUser().then((data) => {
      if (data && data.signInUserSession) {
        user = data
        next()
      }
    }).catch((e) => {
      console.log(e)
      next('/auth/login')
    })
    if (!user) {
      next()
    } else {
      next()
    }
  } else {
    next()
  }
})

export default router

下面是Logout.vue组件：

<template>
  <div class="logout">
  </div>
</template>

<script>
import { Auth } from 'aws-amplify'
import { AmplifyEventBus } from 'aws-amplify-vue';
import { store } from '@/store';
import { router } from '@/router';

export default {
  name: 'logout',

  data() {
    return {
      email: '',
      password: ''
      // signedIn: false
    }
  },

  created(){
    Auth.signOut()
        .then(
          data =>{
          this.$store.state.signedIn = !!data;
          alert("Logged out");
          this.$router.push('/auth/login');
        } )
        .catch(err => console.log(err));
  },

  }

</script>

<style lang="scss">
.login {

  @include media-breakpoint-down(md) {
    width: 100%;
    padding-right: 2rem;
    padding-left: 2rem;
    .down-container {
      display: none;
    }
  }

  h2 {
    text-align: center;
  }
  width: 21.375rem;

  .down-container {
    margin-top: 3.125rem;
  }
}
</style>

Answer 1

很难说，但我认为你有周期性的依赖性。如果我错了就纠正我，但是

事实:路由器/index.js需要组件上下文。

假设: Logout.vue位于components目录中。

因此:路由器/index.js将Logout.vue作为依赖项。

登录:Logout.vue对@/路由器的引用解析为路由器/index.js

因此: Logout.vue将路由器/index.js作为依赖项。

如果注销需要路由器需要注销路由器需要路由器..。你明白我的意思了。因此，构建器正在耗尽内存，因为它碰到了一个无限循环。

我认为您目前处理路由的方式是完全不可能的，因为周期性依赖似乎是不可避免的。恐怕我不是Vue专家，所以我不能告诉你你应该怎么做。我建议提出一个新的问题，询问应该如何进行路由选择，因为这实际上是根本的问题，而不是进口。