Question

我正在使用NuxtJs / VueJs

我有一个问题，我需要动态设置组件的路径。为什么我听到你问？

好吧，我正在创建一组站点，这些站点将使用相同的基本代码库，但外观只会有所不同，因此对于每个域，都希望从特定目录中加载组件。基本组件名称等将保持不变，只是希望能够更改一些超出组件或css中的某些v-if语句的内容。

例如 Site1：sites / mysite / HomePageHero.vue
Site2：sites / yoursite / HomePageHero.vue

现在我知道动态组件，但是存在的问题是，每当我创建一个新站点并且我不想这样做时，我就必须将每个站点组件添加到页面中。因此，我创建的网站越多，该列表就越大。

我只想在.env中设置站点名称，将组件添加到目录中，然后一切正常（或类似操作）

因此，如果您在下面使用我的代码，则我需要DYNAMICHERE是动态的。我可能缺少一些简单的东西。

import HomePageHero from '@/components/sites/DYNAMICHERE/HomePageHero'

为澄清起见，请根据对此的第一个答复。我尝试做以下显然不起作用的事情

import HomePageHero from '@/components/sites/' + process.env.THEME . + '/HomePageHero'

Answer 1

如果您使用的是laravel，则有1个选项：process.env.YOUR_SITE

Answer 2

这就是我们正在做的：

在package.json中声明站点名称
为mongodb使用相同的名称
导入组件并使用与mongodb process.env名称匹配的组件

  "scripts": {
    "siteOne": "cross-env MONGO_DB=siteOne API_URL=http://localhost:3000 MONGO_URL=mongodb://localhost NODE_ENV=development nodemon server/index.js --watch server",
    "siteTwo": "cross-env MONGO_DB=siteTwo API_URL=http://localhost:3000 MONGO_URL=mongodb://localhost NODE_ENV=development nodemon server/index.js --watch server",
    "build_siteOne": "MONGO_DB=siteOne nuxt build",
    "build_siteTwo": "MONGO_DB=siteTwo nuxt build",
    "start": "node server/index.js",
  },

<template>
  <div class="footer">
    <div class="container">
      <component :is="footerComponent"></component>
    </div>
  </div>
</template>


<script>
  import Footer_siteOne from '~/components/Footer_siteOne.vue';
  import Footer_siteTwo from '~/components/Footer_siteTwo.vue';

  export default {
    components: {
      Footer_siteOne,
      Footer_siteTwo,
    },
    computed: {
      footerComponent: function() {
        return 'Footer_'+process.env.MONGO_DB;
      }
    }
  }
</script>

Answer 3

我终于有时间解决这个问题，并使用以下代码解决了最适合我的解决方案的问题

我正在使用dotenv定义环境变量

const HomePageHero = () => import('@/components/sites/' + process.env.WEBSITE_NAME + '/HomePageHero');

这篇文章的文章：

https://vuedose.tips/tips/dynamic-imports-in-vue-js-for-better-performance/

仍然可能有更清洁的解决方案，但这对我来说很好。

Vuejs / NuxtJs包含来自动态设置目录的组件

3 个答案: