Question

我想根据我拥有的客户端使用组件模板（客户端ID在env文件中设置）...所以我想要的是这样的

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

我什么也没有得到，甚至没有错误。...有人可以指出我正确的方向吗？

Answer 1

@Gowri指向正确的方向。您的想法是将组件动态放入容器中。

此fiddle将向您展示将组件的特定名称放入v-bind:is指令的一般思路。或shorthand :is。

我假设您已定义了所有模板并将其导入到容器组件文件中。因此，只需在components部分中分配它们，然后在<component>标记中输入适当的名称即可。

locally registered components的列表可能如下：

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

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

您的getComponentName看起来像：

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

动态导入更新（无需注册组件）

要在不注册组件的情况下加载模板，可以使用Webpack import：

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

VueJS：外部模板文件（使用变量）

1 个答案:

动态导入更新（无需注册组件）

评论后更新