Vue动态加载含组件的服务器模板及预渲染修改模板问题咨询

在Vue3中，直接修改this.$options.template的方式不再生效，因为Vue3的组件编译逻辑在实例创建前就已完成。要实现从服务器加载包含自定义组件的模板并渲染，可通过运行时编译结合动态渲染函数来实现，以下是具体方案：

前提：启用Vue3运行时编译 #

默认情况下Vue3生产环境不包含模板编译器，需要先启用：

• Vue CLI项目：在vue.config.js中添加配置

module.exports = {
  runtimeCompiler: true
}

• Vite项目：安装@vitejs/plugin-vue-jsx并配置，或直接使用包含编译器的Vue版本（如vue/dist/vue.esm-browser.js）。

实现方案：动态编译服务器模板 #

修改你的index.vue组件，通过Vue3的compile函数将服务器返回的模板字符串编译为渲染函数，再动态渲染：

// index.vue
import { compile, h } from 'vue'
import axios from 'axios'

const loadVueModuleOpts= {
   moduleCache: {vue: Vue},  
   async getFile(url) {
     const res = await fetch(url);
     if ( !res.ok )
       throw Object.assign(new Error(res.statusText + ' ' + url), { res }); 
     return {
       getContentData: asBinary => asBinary ? res.arrayBuffer() : res.text(),
     }   
   },
};

export default {
  props: {
    id: { required: true, type: String, default: 'abcdefg' },
  },
  components: {
    'my-field': Vue.defineAsyncComponent(() => 
      loadModule('/static/myproj/js/my-field.vue', loadVueModuleOpts)
    ),
  },
  data() {
    return {
      renderFn: null // 存储编译后的渲染函数
    }
  },
  async created() {
    // 从服务器获取模板
    const template = await axios.get(`/api/template/${this.id}`).then(resp => resp.data)
    // 编译模板为渲染函数
    this.renderFn = compile(template)
  },
  // 自定义渲染函数，动态调用编译后的renderFn
  render() {
    if (!this.renderFn) {
      return h('div', '加载中...')
    }
    // 传递当前组件上下文，确保自定义组件能被识别
    return this.renderFn(this.$.renderContext)
  }
}

方案说明 #

1. 编译模板：使用compile函数将服务器返回的HTML字符串编译为Vue可执行的渲染函数，该过程依赖运行时编译器。
2. 上下文传递：在render方法中调用编译后的渲染函数时，传入当前组件的$renderContext，确保模板中的自定义组件（如my-field）能被正确解析渲染。
3. 异步组件兼容：my-field组件已通过异步方式加载，只要在当前组件的components选项中注册，编译后的模板就能正常识别使用。

备选方案：动态创建组件实例 #

如果需要更灵活的控制，也可以直接动态创建组件选项并通过<component>渲染：

// index.vue 备选实现
import { defineComponent, h } from 'vue'
import axios from 'axios'

// 保留loadVueModuleOpts和my-field组件定义

export default {
  props: {
    id: { required: true, type: String, default: 'abcdefg' },
  },
  components: {
    'my-field': Vue.defineAsyncComponent(() => 
      loadModule('/static/myproj/js/my-field.vue', loadVueModuleOpts)
    ),
  },
  data() {
    return {
      dynamicComponent: null
    }
  },
  async created() {
    const template = await axios.get(`/api/template/${this.id}`).then(resp => resp.data)
    // 动态定义组件
    this.dynamicComponent = defineComponent({
      template,
      components: {
        'my-field': this.$options.components['my-field']
      }
    })
  },
  render() {
    if (!this.dynamicComponent) {
      return h('div', '加载中...')
    }
    return h(this.dynamicComponent)
  }
}

这种方式通过defineComponent动态创建组件，直接传入服务器模板并注册所需自定义组件，同样需要运行时编译器支持。

内容的提问来源于stack exchange，提问作者KensonMan