您正在使用仅运行时构建的 Vue，其中模板编译器不可用答案

【问题标题】：You are using the runtime-only build of Vue where the template compiler is not available您正在使用仅运行时构建的 Vue，其中模板编译器不可用
【发布时间】：2018-04-30 04:08:41
【问题描述】：

我正在尝试使用 webpack 编译我的 Vue.js 应用程序，但我在浏览器中收到此警告。

您正在使用仅运行时构建的 Vue，其中模板编译器不可用。要么将模板预编译成渲染函数，要么使用编译器包含的构建。

这是什么意思？如何解决错误？

【问题讨论】：

标签： webpack vue.js

【解决方案1】：

这是因为默认包含不带模板编译器（需要）的vue 版本。要覆盖此默认值，请将其添加到您的 webpack.config.js：

// webpack.config.js
{
    resolve: {
        alias: {
            vue: 'vue/dist/vue.js'
        },
    },
}

来源：https://github.com/vuejs-templates/webpack/issues/215

【讨论】：

【解决方案2】：

使用渲染功能

new Vue({
    el: 'body',
     render: function(createElement) {
        return createElement(hello)
    } });

【讨论】：

是的！这允许使用仅运行时的构建，该构建要小得多。
什么是你好，如何让 2 个不同的 url 路径呈现 2 个不同的组件？

【解决方案3】：

如果您尝试使用非预编译的 Vue 模板，则会弹出此错误。

要解决此问题，请将runtimeCompiler option in vue.config.js 设置为true：

module.exports = {
  runtimeCompiler: true
}

请注意，这将在您的发行版中包含额外的 JavaScript 负载。

或者，您可以使用预编译的 Vue 模板。

【讨论】：

【解决方案4】：

如果您使用 vue-cli-service 编译您的应用程序，请将以下代码添加到 vue.config.js，具体取决于编译器：

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

如果您使用 webpack 编译您的应用程序，请将以下代码添加到 webpack.config.js:


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

【讨论】：

【解决方案5】：

在 vue.config.js 文件中将 runtimeCompiler 设置为 true 后，我仍然遇到错误。

您可以简单地编辑您的 src/main.js 文件

来自：import Vue from 'vue'

收件人：import Vue from 'vue/dist/vue.js';

【讨论】：

【解决方案6】：

对我来说，这是一个错字（小写）。我有：

import Vue from "Vue";

而不是

import Vue from "vue";

【讨论】：