Question

当我使用yarn serve在本地运行时，该网站运行正常。
但是，当我尝试运行yarn build并在本地打开生产版本（如果需要的话，使用Nginx服务器），然后通过Vue Router打开某个全局注册的组件时，我总是收到错误消息：

TypeError: undefined is not a function

经过一番尝试和错误之后，似乎全局注册组件存在问题。
请注意，我也有一个非全局组件，但是可以打开它。

这是我目前对其进行注册的方式：

function registerComponentsGlobally() {
  const requireComponent = require.context("./components/products", false, /\.vue/);
  const keys = requireComponent.keys();
  for (let i = 0; i < keys.length; i++) {
    const fileName = keys[i];
    const componentConfig = requireComponent(fileName);
    const componentName = fileName.split("/").pop().replace(/\.\w+$/, "");
    Vue.component(componentName, componentConfig.default || componentConfig);
  }
}

或者，我可能会在Vue Router中错误地注册它们：

async function initializeVue() {
  const products = await fetch("products.json").then(data => data.json());

  function toRoutes(routes, {pageUrl, platforms: {0: {isExternal}}}) {
    if (!isExternal) {
      routes.push({
        path: `/${pageUrl}`,
        name: pageUrl,
        component: () => import(`./components/products/${pageUrl}`),
      });
    }
    return routes;
  }

  new Vue({
    router: new Router({
      mode: "history",
      routes: [...defaultRoutes, ...products.reduce(toRoutes, [])],
    }),
    ...

在Vue Router's History Mode documentation中，我将Nginx代码复制到我的配置文件中，并且资产已正确加载，因此似乎没有问题。

我想念什么？
谢谢您的帮助！

编辑：以下是相关的堆栈跟踪：

vue-router.esm.js:1921 TypeError: undefined is not a function
    at Array.map (<anonymous>)
    at a (.*$ namespace object:90)
    at component (main.js:27)
    at vue-router.esm.js:1790
    at vue-router.esm.js:1817
    at Array.map (<anonymous>)
    at vue-router.esm.js:1817
    at Array.map (<anonymous>)
    at Rt (vue-router.esm.js:1816)
    at vue-router.esm.js:1752
    at h (vue-router.esm.js:1959)
    at r (vue-router.esm.js:1733)
    at r (vue-router.esm.js:1737)
    at r (vue-router.esm.js:1737)
    at Pt (vue-router.esm.js:1741)
    at e.zt.confirmTransition (vue-router.esm.js:1988)
    at e.zt.transitionTo (vue-router.esm.js:1890)
    at e.replace (vue-router.esm.js:2212)
    at ue.replace (vue-router.esm.js:2585)
    at a.routeToProduct (product-links.vue:44)
    at ne (vue.runtime.esm.js:1854)
    at HTMLButtonElement.n (vue.runtime.esm.js:2179)
    at HTMLButtonElement.Zi.o._wrapper (vue.runtime.esm.js:6911)

Answer 1

我不知道为什么，但是我设法通过更改使其起作用：

function toRoutes(routes, {pageUrl, platforms: {0: {isExternal}}}) {
  if (!isExternal) {
    routes.push({
      path: `/${pageUrl}`,
      name: pageUrl,
      component: () => import(`./components/products/${pageUrl}`),
    });
  }
  return routes;
}

收件人：

function toRoutes(routes, {pageUrl, platforms: {0: {isExternal}}}) {
  if (!isExternal) {
    // Extracted the directory to a variable
    const dir = `./components/products`;
    routes.push({
      path: `/${pageUrl}`,
      name: pageUrl,
      component: () => import(`${dir}/${pageUrl}`),
    });
  }
  return routes;
}

Vue中的小故障

1 个答案: