生产环境中的 Vue 故障

Posted 2023-02-22

【中文标题】生产环境中的 Vue 故障

【英文标题】：Glitch in Vue in production

【发布时间】：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)

【参考方案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;