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

Posted 2023-02-22

【中文标题】您正在使用仅运行时构建的 Vue，其中模板编译器不可用

【英文标题】：You are using the runtime-only build of Vue where the template compiler is not available

【发布时间】：2018-04-30 04:08:41

【问题描述】：

我正在尝试使用 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";