"Failed to mount component: template or render function not defined" 在 Vue 中，尽管使用了完整的编译器包

Question

我正在尝试开发一个可重用的 Vue 组件。它被设置为使用 webpack 构建，然后演示页面将完整的 Vue 编译器和这个编译后的包加载到页面上。但是，尽管包含了 Vue 编译器，但在加载页面时我收到以下错误。

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

found in

---> <Cwl>
       <Root>

我本以为vue-loader会设置cwl组件的template字段，我本以为我添加到页面的Vue版本会包含编译器。我在这里错过了什么？

问题代码可见于此GitHub URL. Simply clone the repo, run webpack, start a server with http-server, and then browse to http://localhost:8080/demo/。

作为参考，我的演示 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>

我的 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'
        },
    }
};

Answer 1

如果你 console.log(vue_cwl) 你可以看到有一个 default 属性包含实际的 Vue 组件。更改您的代码以使用 default 属性作为组件：

components: {
    cwl: vue_cwl.default
}

来自：

A Vue component is usually exported with export default { /* ... */} so it facilitates the default import like import Component from './component.vue'(ES6 syntax)

When using require() (CommonJS) you have to specify you are requiring the default export

在您的情况下，您是通过 <script> 直接包含组件，但概念仍然存在。

"Failed to mount component: template or render function not defined" 在 Vue 中，尽管使用了完整的编译器包

"Failed to mount component: template or render function not defined" in Vue, despite using full compiler bundle

javascript

webpack

vue.js

vue-loader

vuejs2