这只是我的演示，用于学习目的，你可以在github上查看我的完整代码：https://github.com/tNhanDerivative/nhanStore_frontEnd和我的域名：vuestore.nhan-thenoobmaster.com我在本地计算机上没有看到此错误，但当我在服务器上部署应用程序时。这是常有的事当我尝试为npm run serve提供服务时，这些错误也不会出现。仅在从服务器提供构建文件dist/时显示

Cannot use 'in' operator to search for 'path' in undefined
    at Object.j [as resolve] (vue-router.mjs:3015:13)
    at w.fn (vue-router.mjs:2157:41)
    at w.run (reactivity.esm-bundler.js:190:25)
    at get value [as value] (reactivity.esm-bundler.js:1171:39)
    at w.fn (vue-router.mjs:2159:35)
    at w.run (reactivity.esm-bundler.js:190:25)
    at get value [as value] (reactivity.esm-bundler.js:1171:39)
    at w.fn (vue-router.mjs:2184:60)
    at w.run (reactivity.esm-bundler.js:190:25)
    at get value [as value] (reactivity.esm-bundler.js:1171:39)

这是我的router/index.js文件。我已经尝试将history: createWebHistory(process.env.BASE_URL)更改为history: createWebHistory()。它什么也不做我还检查了所有的路由器链接都有to属性

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

import store from '../store'

import HomeView from '../views/HomeView.vue'

import ProductView from '../views/ProductView.vue'
import CategoryView from '../views/CategoryView.vue'
import SearchView from '../views/SearchView.vue'
import CartView from '../views/CartView.vue'
import SignUpView from '../views/SignUpView.vue'
import LogInView from '../views/LogInView.vue'
import MyAccountView from '../views/MyAccountView.vue'
import CheckoutView from '../views/CheckoutView.vue'
import SuccessView from '../views/SuccessView.vue'


  const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'AboutView',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/sign-up',
    name: 'SignUp',
    component: SignUpView
  },
  {
    path: '/log-in',
    name: 'LogIn',
    component: LogInView
  },
  {
    path: '/my-account',
    name: 'MyAccount',
    component: MyAccountView,
    meta: {
        requireLogin: true
    }
  },
  {
    path: '/search',
    name: 'Search',
    component: SearchView
  },
  {
    path: '/cart',
    name: 'Cart',
    component: CartView
  },
  {
    path: '/cart/success',
    name: 'SuccessView',
    component: SuccessView
  },
  {
    path: '/cart/checkout',
    name: 'CheckoutView',
    component: CheckoutView,
    meta: {
        requireLogin: true
    }
  },
  {
    path: '/:category_slug/:product_slug',
    name: 'Product',
    component: ProductView
  },
  {
    path: '/:category_slug',
    name: 'Category',
    component: CategoryView
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requireLogin) && !store.state.isAuthenticated) {
    next({ name: 'LogIn', query: { to: to.path } });
  } else {
    next()
  }
})

export default router

另外，由于某种原因，它为HomView.vue中的ProductBox组件创建了一个无限循环。

你可以在HomeView.vue中看到，方法getLatestProducts()钩子mounted进行axios API调用，更新latestProducts数据并使ProductBox重新呈现。
我已经尝试了不同的钩子Axios调用beforeCreated（）和created（）。这不管用这就是我使用组件HomeView.vue的地方

<template>
  <div class="home">
    <section class="hero is-medium is-dark mb-6">
        <div class="hero-body has-text-centered">
            <p class="title mb-6">
                Welcome to NoobStore
            </p>
            <p class="subtitle">
                The most honest store online don't sell you anything
            </p>
        </div>
    </section>

    <div class="columns is-multiline">
      <div class="column is-12">
          <h2 class="is-size-2 has-text-centered">Latest products</h2>
      </div>

      <ProductBox 
        v-for="product in latestProducts"
        v-bind:key="product.id"
        v-bind:product="product" />
    </div>
  </div>
</template>

<script>
import axios from 'axios'

import ProductBox from '@/components/ProductBox'

export default {
  name: 'HomeView',
  data() {
    return {
      latestProducts: []
    }
  },
  components: {
    ProductBox
  },
  mounted() {
    this.getLatestProducts()

    document.title = 'Nhan`s Store | Vuejs demo'
  },
  methods: {
    async getLatestProducts() {
      this.$store.commit('setIsLoading', true)
      try {
        const res = await axios.get('/api/v1/latest-products/')
        this.latestProducts = res.data
      } catch(error) {
      console.log(error)
      }

      this.$store.commit('setIsLoading', false)
    }
  }
}