解决vue打包后动态组件component加载字符串模板失效问题

今天在部署vue项目的时候，发现动态模板加载的图片无法显示

以下是我代码里面失效部分

<template>
  <component :is="component_prop.type" :prop_data="component_prop" />
</template>
<script>
let importComponents = {}
export default {
  components: importComponents,
  provide: {},
  props: ['svgInfoData', 'component_prop'],
  data() {
    return {}
  },
  created() {
    this.svgInfoData.forEach((f) => {
      let componentInfo = {
        template: f.template,
        props: f.props
      }
      importComponents[f.type] = componentInfo
    })
  },
  methods: {}
}
</script>

经过一顿查疑解惑，终于找到了问题所在

1.首先这个问题和创建vue项目的时候选择编译模式有关

vue有runtime-compiler和runtime-only两种编译模式，默认为runtime-only，这种模式下的代码轻便，但是不能使用template参数，

如果使用vue-cli进行项目搭建，可以在vue.config.js里面配置属性runtimeCompiler: true

module.exports = {
    runtimeCompiler: true // 运行时编译
}

如果使用vite搭建的项目，则修改vite.config.js 里面的alias属性：

resolve:{
    alias:[
        {
            find: 'vue',
            replacement: 'vue/dist/vue.esm-bundler.js',
        },
    ],
},

然后重新打包发布就可以了

参考文章：

https://blog.csdn.net/Heixiu6/article/details/126714616