[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available

问题描述：

原因分析：

在项目配置的时候，默认 npm 包导出的是运行时构建，即 runtime 版本，不支持编译 template 模板。

vue 在初始化项目配置的时候，有两个运行环境配置的版本：Compiler 版本、Runtime 版本。

其主要区别在于：

1. Compiler 版本：

可以对 template 模板内容进行编译（包括字符串模板和可以绑定的 html 对象作为模板），例如：

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

1. Runtime 版本：

使用 vue-loader 加载.vue 文件（组件文件）时，webpack 在打包过程中对模板进行了渲染。

 

解决方法

修改配置文件中的 vue 引用

一、 vue cli 2.x

找到 webpack.base.conf.js 文件，修改以下配置：

在 webpack.base.conf.js 配置文件中多加了一段代码，将 vue/dist/ package.json 配置文件的"main": "dist/vue.runtime.common.js",改为引用代码中的引用 vue/dist.vue.esm.js 文件，意思就是说 webpack.base.conf.js 这个文件已经将 vue/dist.package.json 的错误引用纠正成 vue/dist.vue.esm.js

// ...
const config = {
  // ...
  resolve: {
    extensions: [".js", ".vue", ".json"],
    alias: {
      vue$: "vue/dist/vue.esm.js",
      "@": resolve("src")
    }
  }
};

二、 vue cli 3.x

修改项目根目录中的配置文件：vue.config.js，具体代码如下：

修改 vue_cli3.0 的配置文件，添加 配置文件：vue.config.js 在项目的根目录下,目的是修改在引入 vue 时，不要采用 runtime 形式的文件,而采用 dist/vue.esm.js 形式文件

// ...

module.exports = {
  // ...

  configureWebpack: config => {
    config.resolve = {
      extensions: [".js", ".vue", ".json", ".css"],
      alias: {
        vue$: "vue/dist/vue.esm.js",
        "@": resolve("src")
      }
    };
  }

  // ...
};

【划重点】 

发现了一个新的方法，只需要添加一行代码的配置，即可实现支持template编译：

// vue.config.js

module.exports = {
  runtimeCompiler: true,
}