Vue项目打包后内联字符串不显示的原因

Live&&learn2026-04-26 10:28

1.问题描述

以下代码是使用vue语法写得一个字符串模板。运行没问题，但打包后却不显示。

javascript 复制代码

// template是一个字符串
const CustomNode = {
  props: ["data"],
  template: `
    <div class="custom-node" :class="'status-' + data.status">
      <div class="node-name">{{ data.nodeName }}</div>
      <div class="node-status">{{ data.permissionFlag }}</div>
    </div>
  `
};

2.原因解析

CustomNode 使用了内联字符串模板，在生产构建时缺少 Vue 的模板编译器 ，导致节点无法渲染。
本地开发时 ，Vue 使用的是完整版（包含模板编译器），所以字符串模板 template: '...' 能正常工作。
打包构建时，为了减小体积，默认使用运行时版（不含编译器），此时 template 字符串无法被编译成渲染函数，自定义节点渲染失败，只剩下边和箭头。

若通过打包配置（保留模板编译器），会增加打包体积**（不建议）**，如下。

javascript 复制代码

export default defineConfig({
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js'  // 使用完整版
    }
  }
})

3.修改：

以下是通过渲染函数进行渲染，或将其封装成组件也可。这样就解决问题了

javascript 复制代码

// h是vue中的渲染函数
const CustomNode = {
  props: ["data"],
  setup(props) {
    return () =>
      h("div", { class: `custom-node status-${props.data.status}` }, [
        h("div", { class: "node-name" }, props.data.nodeName),
        h("div", { class: "node-status" }, props.data.permissionFlag)
      ]);
  }
};