代码之家 › 专栏 › 技术社区 › avi12

Vue在生产中出现故障

vue-router vue-component vue.js nginx javascript

avi12 · 技术社区 · 5 年前

yarn serve ,网站运行得非常好。
但是,当我试着跑步的时候 yarn build 然后在本地打开生产版本(如果有必要的话,使用Nginx服务器),然后通过Vue路由器打开某个全局注册的组件,我不断得到一个错误:

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);
  }
}

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

我错过了什么?
谢谢你的帮助!

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)

0 回复 | 直到 5 年前

avi12 5 年前

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;
}