Use the template string template: ``, the content will not be displayed after vue is run locally and vite is packaged and released.

Problem Description

The official website address of the vben admin framework is used ; the string template template is used in defineComponent. The template content can be displayed normally when running locally. However, the template content cannot be displayed after packaging and publishing. After packaging and publishing, the page content using tags can be displayed normally. Because the project requires the front-end to dynamically generate the interface based on part of the front-end code returned by the background to implement the function; consider using the string template template to implement the function. After going through many dangers to achieve the effect locally, it was discovered after the release that the content in the string template template could not be displayed. Other uses The content of the label can be displayed normally.

Local running effect.

Effect after packaging:

Vue-related problem solving

Building using vue-cli will not be displayed even if it is run locally. Based on this discovery, I searched around and
found that there is actually a relevant introduction on the official website:
https://cn.vuejs.org/guide/scaling- up/tooling.html#project-scaffolding

Specific configuration:

Vue has two compilation modes: runtime-compiler and runtime-only. Runtime-only is enabled by default. In this mode, the template parameter cannot be used. You need to configure the property runtimeCompiler: true in vue.config.js to build using vue-cli
. , create vue.config.js under the project root directory to configure a property

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

Be sure to note that the configuration requires restarting the project! ! !
Related articles found:
https://www.jianshu.com/p/4586bb08891f
https://blog.csdn.net/huangpb123/article/details/122753934 // This article is relatively simple and comprehensive, it is mine God, there are other versions of vue2. You can refer to the corresponding modifications in the project.

Vite-related problem solving

That is the vite build tool used by vben admin I use

In the same way as vue, when using the vite build tool, vue.runtime.esm-bundler.js is used by default. This runtime-only version cannot handle the case where the template option is a string. The case where the template option is a string needs to be Use the version vue.esm-bundler.js that includes the runtime compiler.
Build using vite: Create vite.config.js configuration alias under the project root directory, and configure it under resolve.alias; official documentation

Specific configuration:

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

or

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

After configuration, repackage and publish to solve the problem