You Are Using the Runtime-Only Build of Vue Where the Template Compiler Is Not Available. Either Pre

在 Vue 项目初始化时遇到了这样的问题:

[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 模式,默认为 runtime 模式,Vue 模块则指向 dist/vue.runtime.common.js 位置。

观察我的 main.js 代码,是这样的的,跟之前的写法大为不同:

/_ eslint-disable no-new _/;
new Vue({
  el: "#app",
  router,
  created() {},
  components: {
    App,
  },
  template: "<App/>",
});

这种形式是 compiler 模式,因此就会出现上面的错误。

解决办法

  1. 直接修改 main.js 代码
//runtime
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

Vue cli 2.0 中没有出现这个为,是因为 2.0 中 有 webpack 的别名配置如下:

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

也就是说, import Vue from 'vue' 这行代码被解析为 import Vue from 'vue/dist/vue.esm.js' , 因此直接指定了文件的位置,而没有使用 main 字段默认的文件位置。
针对上面问题,也可以直接在 main.js 中修改引用 vue 的代码:

import Vue from "vue/dist/vue.esm.js";
  1. 修改 webpack 配置

在 Vue cli 3.0 中需要在 vue.config.js 文件里加上 webpack 的配置,具体代码如下:

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