技術標籤：JavaScriptvuevue.jsantv x6

在使用antv的 X6的vue-shape元件時，報一個警告錯誤：You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

原因：

在專案配置的時候，預設 npm 包匯出的是執行時構建，即 runtime 版本，不支援編譯 template 模板。

vue 在初始化專案配置的時候，有兩個執行環境配置的版本：Compiler 版本、Runtime 版本。

其主要區別在於：

1、Compiler 版本：

可以對 template 模板內容進行編譯（包括字串模板和可以繫結的 html 物件作為模板），例如：

new Vue({
  el: "#x6",
  template: "<div>{{msg}}</div>",
  data: {
    msg: "x6"
  }
});

2、Runtime 版本：

使用 vue-loader 載入.vue 檔案（元件檔案）時，webpack 在打包過程中對模板進行了渲染。

解決辦法：

// vue.config.js
 
module.exports = {
  runtimeCompiler: true,
}