生产环境中的 Vue 故障答案

【问题标题】：Glitch in Vue in production生产环境中的 Vue 故障
【发布时间】：2019-10-27 11:42:39
【问题描述】：

当我使用 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)

【问题讨论】：

标签： javascript nginx vue.js vue-component vue-router

【解决方案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;
}

【讨论】：