VueJS: внешний файл шаблона (с использованием переменной)

Question

Я хочу использовать шаблон компонента в зависимости от клиента, который у меня есть (идентификатор клиента установлен в файле env) ... так что я хотел бы что-то вроде этого

<template :src="'../themes/' + process.env.VUE_APP_CLIENT + '/assets/views/myComponent.vue'"></template>

Я получаюничего подобного, даже не ошибка .... кто-то может указать мне правильное направление?

Answer 1

@ Гаури указал в правильном направлении. Ваша идея состоит в том, чтобы динамически помещать компоненты в контейнер.

Эта fiddle покажет вам общую идею помещения конкретного имени компонента в директиву v-bind:is. Или стенография :is.

Я предполагаю, что все ваши шаблоны определены и импортированы в файл компонента контейнера. В результате просто назначьте их в секции components и присвойте соответствующее имя тегу <component>.

Список локально зарегистрированных компонентов может выглядеть следующим образом:

components: {
 'client-1': Client1Template,
 'client-2': Client2Template
}

<component
    :is="getComponentName"
  ></component>

Ваше getComponentName может выглядеть так:

computed: {
    getComponentName: function () {
      return process.env.VUE_APP_CLIENT;
    }
  }

Обновление для динамического импорта (без регистрации компонента)

Для загрузки шаблона без регистрации компонента вы можете использовать импорт Webpack:

<template>
    <component :is="component" v-if="component" />
</template>
<script>
export default {
    data() {
        return {
            component: null,
        }
    },
    computed: {
        loader() {
            if (!process.env.VUE_APP_CLIENT) {
                return null
            }
            return () => import(`themes/${process.env.VUE_APP_CLIENT}/assets/views/myComponent.vue`)
        },
    },
    mounted() {
        this.loader()
            .then(() => {
                this.component = () => this.loader()
            })
            .catch(() => {
                // show an error message or maybe load some default template
                this.component = () => import('themes/defaultClient/assets/views/component.vue')
            })
    },
}
</script>

Кроме того, я бы посоветовал вам взглянуть на функциональный компонент. У этого есть почти подобный подход к тому, что я предложил, но способом Vue: https://vuejs.org/v2/guide/render-function.html#Functional-Components

Обновление после комментариев

<script lang="ts">
  import { Component } from "vue-property-decorator";
  import MyComponent from "@/components/MyComponent.vue";
  @Component({})
  export default class MyComponentClientName extends MyComponent {}
</script>