使用模板字符串template：``，vue本地运行、vite打包发布后内容不显示

问题描述

使用的是vben admin 框架 官网地址；在defineComponent 里面使用 字符串模板template，本地运行可以正常显示模板内容，打包发布后模板内容无法显示。打包发布后使用标签的页面内容可以正常显示。因项目要求前端根据后台返回部分前端代码动态生成界面实现功能；考虑使用 字符串模板template 实现功能，本地历经千险实现效果后，在发布后又发现字符串模板template 里面的内容无法展示，其他使用标签的内容可以正常显示。

本地运行效果

打包后效果：

vue 相关问题解决

使用vue-cli 进行构建即使本地运行也不会显示，基于此发现的我那个问题契机
找了一大圈发现在官网上面其实有相关介绍：
https://cn.vuejs.org/guide/scaling-up/tooling.html#project-scaffolding

具体配置：

Vue有 runtime-compiler与runtime-only 两种编译模式，默认启用的是runtime-only ，在这种模式下不能使用template参数，需要在vue.config.js 配置属性runtimeCompiler: true
使用vue-cli 进行构建，项目根目录下面建立 vue.config.js 配置一个属性

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

一定注意配置需要重启项目！！！
查找到的相关文章：
https://www.jianshu.com/p/4586bb08891f
https://blog.csdn.net/huangpb123/article/details/122753934// 这篇文章写得比较简单全面，就是我的神啊，还有其他版本的vue2, 项目中对应修改可以参照

vite相关问题解决

也就是我所使用的vben admin 所使用的 vite构建工具

与vue同理，使用vite构建工具的情况下，默认使用的是 vue.runtime.esm-bundler.js 这个仅运行时版本，不能处理 template 选项是字符串的情况，template 选项是字符串的情况要使用包含运行时编译器的版本 vue.esm-bundler.js。
使用vite 构建： 项目根目录下面建立 vite.config.js配置别名,在resolve.alias下进行配置；官方文档

具体配置：

resolve: {
    
    
      alias: [
        {
    
    
          find: 'vue', // 解决动态模板发布后不显示问题
          replacement: 'vue/dist/vue.esm-bundler.js',
        },
      ],
    },

或者

alias: {
    
    
   'vue': 'vue/dist/vue.esm-bundler.js'
},

配置好后重新打包发布问题解决