[英]“Failed to mount component: template or render function not defined” in Vue, despite using full compiler bundle
I am trying to develop a re-usable Vue component. 我正在尝试开发可重复使用的Vue组件。 It is setup to build using webpack, and then a demo page loads the full Vue compiler and this compiled bundle onto a page. 设置使用Webpack进行构建,然后演示页面将完整的Vue编译器和此编译的包加载到页面上。 However, on loading the page I receive the following error, despite having included the Vue compiler. 但是,尽管包含了Vue编译器,但在加载页面时仍收到以下错误。
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Cwl>
<Root>
I would have thought that the vue-loader would have set the template
field of the cwl
component, and I would have thought that the Vue version I added to my page would include the compiler. 我本以为vue-loader将设置cwl
组件的template
字段,并且我以为我添加到页面中的Vue版本将包括编译器。 What am I missing here? 我在这里想念什么?
The code in question can be seen at this GitHub URL . 可以在此GitHub URL上查看有问题的代码。 Simply clone the repo, run webpack
, start a server with http-server
, and then browse to http://localhost:8080/demo/ . 只需克隆存储库,运行webpack
,使用http-server
启动http-server
,然后浏览至http:// localhost:8080 / demo / 。
For reference, my demo HTML page looks like this: 作为参考,我的演示HTML页面如下所示:
<!DOCTYPE html>
<html lang="en">
<body>
<div id="vue" class="container container-fluid">
<cwl
cwl-url="https://rawgit.com/rabix/cwl-svg/master/cwl-samples/fastqc.json"
></cwl>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script src="../dist/index.js"></script>
<script>
Vue.config.devtools = true;
Vue.config.debug = true;
new Vue({
el: '#vue',
components: {
cwl: vue_cwl
}
})
</script>
</body>
</html>
And my webpack config looks like this: 我的webpack配置看起来像这样:
const path = require("path");
module.exports = {
devtool: "source-map",
// Read files from js/src
entry: './cwl.vue',
// Output everything into the static folder
output: {
libraryTarget: "umd",
path: path.resolve("dist/"),
filename: "index.js",
library: 'vue_cwl'
},
externals: {
vue: 'vue'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [require('babel-preset-env')]
}
},
},
{
enforce: "pre",
test: /\.ts?$/,
exclude: ["node_modules"],
use: {
loader: "awesome-typescript-loader",
options: {
useBabel: true
}
}
},
{test: /\.css$/, loaders: ["style-loader", "css-loader"]},
{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
}
]
},
resolve: {
extensions: [".ts", ".js", ".vue"],
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
}
};
If you console.log(vue_cwl)
you can see there is a default
property which contains the actual Vue component. 如果您使用console.log(vue_cwl)
,则可以看到有一个default
属性,其中包含实际的Vue组件。 Change your code to use the default
property as the component: 更改代码以将default
属性用作组件:
components: {
cwl: vue_cwl.default
}
From my answer to a similar question : 从我对类似问题的回答 :
A Vue component is usually exported with
export default { /* ... */}
so it facilitates the default import likeimport Component from './component.vue'
(ES6 syntax) Vue组件通常使用export default { /* ... */}
导出,因此它便于默认导入,例如import Component from './component.vue'
语法)导入import Component from './component.vue'
When using require() (CommonJS) you have to specify you are requiring the default export 使用require()(CommonJS)时,必须指定您需要默认导出
In your case you are including directly the component via <script>
but the concept remains. 在您的情况下,您将通过<script>
直接包括该组件,但是概念仍然存在。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.