Question

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

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

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

Answer 1

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

要解决此问题，请将runtimeCompiler option in vue.config.js设置为function Icon(props) { return ( <Ionicon name={props.name} size={props.size} color={props.color} /> ); } const DrawerNavigator = createDrawerNavigator(); function Drawer() { return ( <DrawerNavigator.Navigator drawerContentOptions={{ activeTintColor: Colors.drawerScreenSelected }} > <DrawerNavigator.Screen name="Home" component={Tabs} options={{ drawerIcon: ({color, size}) => ( <Icon name="md-home" color={color} size={size} /> ) }} /> <DrawerNavigator.Screen name="Login" component={LoginScreen} options={{ drawerIcon: ({color, size}) => ( <Icon name="md-log-in" color={color} size={size} /> ) }} /> <DrawerNavigator.Screen name="Device Configuration" component={DeviceConfigScreen} options={{ drawerIcon: ({color, size}) => ( <Icon name="md-bluetooth" color={color} size={size} /> ) }} /> <DrawerNavigator.Screen name="Email Data" component={ExportDataScreen} options={{ drawerIcon: ({color, size}) => ( <Icon name="md-at" color={color} size={size} /> ) }} /> </DrawerNavigator.Navigator> ); } export default Drawer;：

true

请注意，这将在您的发行版中包含其他JavaScript有效负载。

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

Answer 2

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

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

来自：import Vue from 'vue'

到：import Vue from 'vue/dist/vue.js';

Answer 3

这是因为默认情况下包含没有模板编译器（需要）的vue版本。要覆盖此默认设置，请将其添加到webpack.config.js：

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

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

Answer 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'
      }
    }

Answer 5

使用渲染功能

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

Answer 6

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

import Vue from "Vue";

代替

import Vue from "vue";

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

6 个答案: