Failed to mount component: template or render function not defined. 錯誤的解決方法
阿新 • • 發佈：2018-12-26
Vue.js 2 遇到 vue.runtime.common.js?d43f:511 [Vue warn]: Failed to mount component: template or render function not defined. (found in root instance) 錯誤的解決方法。
問題描述
先說一下每個檔案的內容。
package.json：
{
"name": "test-typeof-vue",
"version": "0.0.1",
"main": "index.js",
"license": "MIT",
"scripts webpack.config.js：
var path = require('path')
var webpack = require index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>bmsclient</title>
</head>
<body>
<div id="app"></div>
<h1>aaaaaaaaaaaaaaaaaaaa</h1>
<script src="/dist/build.js"></script>
</body>
</html>
main.js：
import Vue from "vue";
new Vue({
el: "#app"
});最後在命令列專案資料夾下執行命令 npm run dev, 伺服器可以正常啟動，但是瀏覽器的控制檯列印錯誤資訊：
vue.runtime.common.js?d43f:511 [Vue warn]: Failed to mount component: template or render function not defined.
(found in root instance)
解決方法
import Vue from “vue”; 預設引入的檔案是 vue/dist/vue.runtime.common.js。這個讀者可以在node_modules/vue/package.json檔案裡面查到。package檔案的main選項指定了預設執行的檔案。關鍵的package.json程式碼如下：
"name": "vue",
"version": "2.1.3",
"description": "Reactive, component-oriented view layer for modern web interfaces.",
"main": "dist/vue.runtime.common.js",讀者可以在github上閱讀vue.js 2.1.3的文件。文件位置在vue/dist/README.md。這個文件說明了 vue.runtime.common.js 檔案不含編譯器，因此不支援template選項。我們使用Webpack和template選項的話，可以使用vue.common.js檔案。vue.common.js檔案包含編譯器。所以main.js中把
import Vue from "vue";改寫成
import Vue from "vue/dist/vue.common.js";就可以了。而且可以正常使用 vue 檔案。
下面是在上面的程式碼基礎上，加上的使用vue檔案的例子：
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> <title>bmsclient</title>
</head>
<body>
<div id="app">
<hello></hello>
</div>
<h1>aaaaaaaaaaaaaaaaaaaa</h1>
<script src="/dist/build.js"></script>
</body>
</html>
main.js
import Vue from "vue/dist/vue.common.js";
import hello from "./hello.vue"
new Vue({
el: "#app",
components:{
hello
}
});
hello.vue
<template>
<div>
<h1>Hello</h1>
<span>{{zca}}</span>
</div>
</template>
<script>
export default {
data:function(){
return {
zca: "zca"
}
},
mounted:function() {
}
}
</script>
<style></style>