錯誤 - 無法裝入組件：模板或渲染功能未定義。 （在根實例中找到）

Question

我正在使用browserify和NPM來引入vue。

var Vue = require('vue'); 

module.exports = function() { 

new Vue({ 
el: '#app', 
    data: { 
    message: 'Hello Vue2!' 
    } 
}) 
} 

我得到了安裝錯誤。這可能是問題。 https://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build

然而，當我行添加到我的package.json

"browser": { 
    "vue": "vue/dist/vue.common" 
}, 

我得到一個錯誤

錯誤：解析文件/用戶/標記/測試網站/ node_modules/VUE /距離/ VUE。 common.js：6278行：無效的正則表達式

我的HTML簡直是

<div id="app"></div> 

Answer 1

我認爲你需要使用aliasify這個（我假設你已經安裝了vueify）：

npm install alisaify --save dev 

然後在package.json，你可以這樣做：

"browserify": { 
    "transform": [ 
     "aliasify", 
     "vueify" 
    ] 
    }, 
    "aliasify": { 
    "aliases": { 
     "vue": "vue/dist/vue.common" 
    } 
    } 

---

要安裝vueify可以簡單地做：

npm install vueify --save-dev 

你可以然後你SE single file components

---

的runtime build和standalone build是很混亂的根源，所以我只是想說明如何構建這些工作，這是什麼坐騎錯誤確實是。

的runtime build簡直是獨立構建無需編譯模板的能力，所以你需要編寫任何模板，然後才能使用它們，這意味着它必須與像webpack或browserify構建工具來使用。對於webpackvue-loader爲您處理此編譯，您使用browserify您使用Vueify，因此取決於您的構建工具，您將需要其中一個將您的.vue文件轉換爲渲染函數。

內部此編譯步驟將採取一些看起來像這樣：

<template> 
    <div> 
    Hello World 
    </div> 
</template> 

，並轉換成的東西，看起來像這樣：

render: function(createElement) { 
    return createElement('div','Hello World'); 
} 

現在，對於這個工作，你需要一個條目點爲您的整個應用程序，並且此入口點需要安裝在您的main vue instance：

import Vue from 'vue' // pull in the runtime only build 
import App from './app.vue' // load the App component 

new Vue({ 
    el: "#app", 
    // This render function mounts the `App` component onto the app div 
    render: (h) => { 
    return h(App) 
    } 
}); 

現在編譯步驟Vue將爲您編譯所有組件，其中App組件爲入口點。因此，在App.vue你可能有一些看起來像這樣：

<template> 
    <message :msg="Hello"></message> 
</template> 

<script> 
    // import the message component so we can display a message 
    import message from './message.vue'; 

    export default { 
    components: { 
     message 
    } 
    } 
</script> 

OK，那你爲什麼得到渲染功能沒有定義的錯誤？簡單地說，因爲你還沒有定義渲染函數。這可能看起來很明顯，但錯誤非常棘手，因爲它要求您首先了解所有內部組件。解決這個問題的真正方法是將app定義爲single file component，然後使用渲染函數將其添加到主Vue實例，然後編譯整個東西。所以，你的整個應用會是這個樣子：

message.vue：

<template> 
    <div>{{message}}</div> 
</template> 

<script> 
    export default { 
    data(){ 
     return { 
     messsage: "Hello Vue2!" 
     } 
    } 
    } 
</script> 

main.js

import Vue from 'vue'; 
import message from './message.vue'; 

new Vue({ 
    el: '#app', 
    render: (createElement) => { 
    return createElement(message) 
    } 
}); 

現在的Vue將追捕id爲 「應用程序」 的元素，注入你的消息組件。

那麼，就讓我們看看你會如何寫這個，如果你有做手工：

Vue.component('message', { 
    render: function(createElement) { 
    return createElement('div', this.msg) 
    }, 
    data() { 
    return { 
     msg: "Hello Vue2!", 
    } 
    } 
}); 

new Vue({ 
    el: "#app", 
    render: function(createElement) { 
    return createElement('message') 
    } 
}) 

這裏的的jsfiddle（真正使用運行時只能建） ：https://jsfiddle.net/6q0Laykt/

的standalone build包含了編譯器，因此您不需要執行此編譯步驟。這種便利的權衡是更大的vue構建和更多的開銷。

如果您想讓組件直接在您的HTML中呈現組件，即不使用單個文件組件時，也需要使用此構建。

的​​是有趣的，因爲據我瞭解，它實際上是一個不同的構建，需要一個瀏覽器，但它確實有編譯templates你的能力。所以，這就是你的代碼與CDN一起運行的原因。

希望在那裏的某個地方可以找到解決問題的辦法，但是如果您仍想使用standalone build，並且在common.js文件中出現錯誤，則可能需要查看非常用版本是否有效，以前推薦作爲別名文件：

"aliasify": { 
    "aliases": { 
     "vue": "vue/dist/vue" 
    } 
    }