Vue動態組件加載問題與Nginx部署

我有以下情況：

我的 vue 應用程式中有一個組件，它根據 API 查詢動態加載組件。這是我的模板：

<template>
  <main class="flex-1">
    <div class="py-6">
      <div class="px-4 sm:px-6 md:px-0 space-y-6">
        <LoadingComponent v-if="chosenSideBarItem === null" />
        <component v-else :is="getComponent(chosenSideBarItem.component)" />
      </div>
    </div>
  </main>
</template>

這是我的腳本部分

const componentMap = {
  Comp1: "./components/Comp1.vue",
  Comp2: "./components/Comp2.vue",
  Comp3: "./components/Comp3.vue",
};

Object.entries(componentMap).forEach(([key, value]) => {
  asyncComponents[key] = defineAsyncComponent({
    loader: () => import(value),
    loadingComponent: LoadingComponent,
    delay: 200,
    errorComponent: ErrorComponent,
    timeout: 3000,
  })
});


function getComponent(name : string) {
  return asyncComponents[name];
}

所以基本上應用程式會根據一些字串動態加載給定的組件。這在我的開發環境中作業得很好，但是如果我嘗試使用 nginx 將它部署在我的 docker 容器中，我會收到 MIME 錯誤

Loading module from “http://localhost/assets/components/Comp1.vue” was blocked because of a disallowed MIME type (“text/html”).

可能是因為該目錄不存在。這是我的 nginx.conf

worker_processes 4;

events { worker_connections 1024; }

http {
   server {
          listen       80;
          server_name  localhost;

          location / {
              root   /usr/share/nginx/html;
              index  index.html index.htm;
              include  /etc/nginx/mime.types;
              try_files $uri $uri/ /index.html;
          }
    }
}

提前致謝！

uj5u.com熱心網友回復：

目前尚不清楚您使用的是 Vite 還是 Webpack (Vue CLI)，但在使用動態匯入時兩者都有非常相似的限制 ( import(...))

這是Vite 使用的@rollup/plugin-dynamic-import-vars的檔案

最重要的限制是基于import()必須在編譯時由捆綁器處理的事實。因此捆綁器必須能夠在編譯時靜態地分析引數并推斷出可能的匯入。使用變數當然是不可能的......

所以解決它的一種方法是：

const componentLoaders = {
  Comp1: () => import("./components/Comp1.vue"),
  Comp2: () => import("./components/Comp2.vue"),
  Comp3: () => import("./components/Comp3.vue"),
};

Object.entries(componentLoaders).forEach(([key, loader]) => {
  asyncComponents[key] = defineAsyncComponent({
    loader,
    loadingComponent: LoadingComponent,
    delay: 200,
    errorComponent: ErrorComponent,
    timeout: 3000,
  })
});


function getComponent(name : string) {
  return asyncComponents[name];
}

...或不使用地圖：

function getAsyncComponent(name : string) {
  return defineAsyncComponent({
    loader: () => import(`./components/${name}.vue`) ,
    loadingComponent: LoadingComponent,
    delay: 200,
    errorComponent: ErrorComponent,
    timeout: 3000,
  })
}

uj5u.com熱心網友回復：

為什么不這樣做呢？

components: {
    firstcomponent: defineAsyncComponent({
      loader: () => import('./firstcomponent.vue'),
    }),
    secondcomponent: defineAsyncComponent({
      loader: () => import('./secondcomponent.vue'),
    }),
  },

這樣代碼就不那么復雜了，并且在模板中使用時按需加載

模板中的用法就像

<component :is="componentName" />

其中componentName 將是“firstcomponent”或“secondcomponent”

如果您在多個加載器中重復相同代碼時遇到問題，您可以這樣做

const defaultParams = {
  delay: 20,
  timeout: 3000,
}

components: {
        firstcomponent: defineAsyncComponent({
          loader: () => import('./firstcomponent.vue'),
          ...defaultParams,
        }),
        secondcomponent: defineAsyncComponent({
          loader: () => import('./secondcomponent.vue'),
          ...defaultParams,
        }),
      },

標籤：javascript Vue.js nginx 网络

上一篇：停止運行影片計數器腳本

下一篇：如何使用內部不同顏色的文本創建Bootstrap5工具提示？