尽管使用了完整的编译器捆绑包，但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上查看有问题的代码。 只需克隆存储库，运行webpack ，使用http-server启动http-server ，然后浏览至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
}

从我对类似问题的回答：

Vue组件通常使用export default { /* ... */}导出，因此它便于默认导入，例如import Component from './component.vue'语法）导入import Component from './component.vue'

使用require（）（CommonJS）时，必须指定您需要默认导出

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

尽管使用了完整的编译器捆绑包，但Vue中的“无法安装组件：模板或渲染功能未定义”

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-02-18 10:34:25

尽管使用了完整的编译器捆绑包，但Vue中的“无法安装组件：模板或渲染功能未定义”

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-02-18 10:34:25

解决方案1
2 已采纳 2018-02-18 10:34:25