You are using the runtime-only build of Vue where the template compiler is not available. Either pre

在升级脚手架到vue-cli3.0版本的时候出现了这个报错：

[Vue warn]: 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.

我在这里大概说一下出现这个报错的原因在哪里和解决办法

原因
vue有两种形式的代码 compiler（模板）模式和runtime模式（运行时），vue模块的package.json的main字段默认为runtime模式， 指向了"dist/vue.runtime.common.js"位置。

这是vue升级到2.0之后就有的特点。

而我的main.js文件中，初始化vue却是这么写的，这种形式为compiler模式的，所以就会出现上面的错误信息

// compiler
new Vue({
  el: '#app',
  router: router,
  store: store,
  template: '',
  components: { App }
})

解决办法
将main.js中的代码修改如下就可以

//runtime

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app")

到这里我们的问题还没完，那为什么之前是没问题的，之前vue版本也是2.x的呀？

这也是我要说的第二种解决办法

因为之前我们的webpack配置文件里有个别名配置，具体如下

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js' //内部为正则表达式  vue结尾的
    }
}

也就是说，import Vue from ‘vue’ 这行代码被解析为 import Vue from ‘vue/dist/vue.esm.js’，直接指定了文件的位置，没有使用main字段默认的文件位置

所以第二种解决方法就是，在vue.config.js文件里加上webpack的如下配置即可，

configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js' 
      }
    }

既然到了这里我想很多人也会想到第三中解决方法，那就是在引用vue时，直接写成如下即可

import Vue from 'vue/dist/vue.esm.js'

总结
遇到问题之后不是说解决了问题就完事了，更重要的是要思考 – 为什么？，原因是啥？要理解而不是死记，只有这样你才能得到很大的提升！

---

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

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

其主要区别在于：

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

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

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,
}