Question

我已经在这个问题上困扰了好几天。我已经尝试了所有可以找到的东西，但仍然无法正常工作。

在app.js中，当我进行如下设置时，它会起作用：

new Vue({
    el: '#app',
    render: h => h('div', 'Hello World')
})

我的代码：

app.js

import Vue from 'vue'
import User from './App.vue'
import path from 'path'

new Vue({
    el: '#app',
    render: h => h(User)
})

App.vue

<template>
    <div>
        <h1>{{ message }}</h1>
    </div>
</template>
<script>
    export default {
        data: () => {
            message: 'Hello World'
            }
        }
    }
</script>

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue Webpack Demo</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="app.bundle.js"></script>
</body>
</html>

UPDATE [1]：

HERE是我的代码

我也做到了：

console.log(User)，输出正常。
在渲染功能中使用模板选项，它可以正常工作：

render: h => h({ template: '<div>Hello World</div>' })

我很困惑，似乎由于某种原因我无法从.vue文件中渲染模板

整个错误消息：

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <App> at src/App.vue
   <Root>
warn @ vue.esm.js:611`

Answer 1

固定版本export default {...}中存在错误：

export default {
    data: () => ({
        message: 'Hello World'
    })
}

Answer 2

我没有挂载App.vue

这就是我所做的更改：

在App.vue

中

<template>
    <div id="app">
        <h1>{{ message }}</h1>
    </div>
</template>

在main.js

中

new Vue({
    el: '#app',
    render: h => h(User)
}).$mount('#app')

模板或渲染功能未定义错误

2 个答案: